web-dev-qa-db-fra.com

API Google Maps - Info-bulle sur les marqueurs

J'ai un petit problème en ce moment avec les titres de mes marqueurs Google Maps qui ne s'affichent pas. Ceci est ma première carte, je ne sais pas trop ce que je fais mal.

Tout fonctionne correctement et le marqueur apparaît, sauf lorsque vous cliquez/survolez le marqueur, l'infobulle ou le titre n'apparaît pas, comme il se doit.

Toute aide est super!

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {

    // set mapOptions
    var mapOptions = {
      center: new google.maps.LatLng(40, -20),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
    };

    // set min and max zoom
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    var opt = { minZoom: 3, maxZoom: 21 };
    map.setOptions(opt);

    // bounds of the desired area
    var allowedBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-79.00, -180.00),
      new google.maps.LatLng(79.00, 180.00)
    );
    var boundLimits = {
      maxLat : allowedBounds.getNorthEast().lat(),
      maxLng : allowedBounds.getNorthEast().lng(),
      minLat : allowedBounds.getSouthWest().lat(),
      minLng : allowedBounds.getSouthWest().lng()
    };

    var lastValidCenter = map.getCenter();
    var newLat, newLng;
    google.maps.event.addListener(map, 'center_changed', function() {
      center = map.getCenter();
      if (allowedBounds.contains(center)) {
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
        return;
      }
      newLat = lastValidCenter.lat();
      newLng = lastValidCenter.lng();
      if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
        newLng = center.lng();
      }
      if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
        newLat = center.lat();
      }
      map.panTo(new google.maps.LatLng(newLat, newLng));
    });

    // set markers
    var point = new google.maps.LatLng(40, -20);
    var marker = new google.maps.Marker({
        position: point,
        title:"Hello World!"
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);


  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
12
Keyfer Mathewson

Woops, j'aurais probablement dû faire un peu plus de recherche avant de poster, mais je me suis dit que je pourrais aussi bien poster ma propre solution.

Au lieu d'un titre, j'ai utilisé la fenêtre d'informations de Google Maps:

J'espère que cela aidera quelqu'un d'autre!

    var point = new google.maps.LatLng(40, -20);
    var data = "Hello World!";
    var infowindow = new google.maps.InfoWindow({
      content: data
    });
    var marker = new google.maps.Marker({
        position: point,
        title:"Hello World!"
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
30
Keyfer Mathewson