web-dev-qa-db-fra.com

Google map API v3 - Ajouter plusieurs infowindows

J'ai une section working de Google Maps en javascript, j'ai eu un problème.

Le problème que j’avais, c’est qu’une seule infowindow se présentait, la dernière. J'ai trouvé une solution sur un autre thread de pile qui a fonctionné. Mais je ne pouvais pas vraiment comprendre pourquoi. Je suis assez nouveau en Javascript, donc j'espérais que quelqu'un pourrait m'expliquer ce qui a changé et comment.

Voici le code de travail:

function setMarkers(map, locations){
  for(var i = 0; i < locations.length; i++){
    var marker = locations[i];
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    var content = locations[i][0];
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
      position:latLng,
      map: map
    });

    google.maps.event.addListener(marker, 'click', function(content){
      return function(){
        infowindow.setContent(content);
        infowindow.open(map, this);
      }
    }(content));
  }
}

Voici le code original cassé (je ne collerai que ce qui a changé):

 google.maps.event.addListener(marker, 'click', function(){
      infowindow.setContent(content);
      infowindow.open(map, marker);
    });

Maintenant, ce que j'aimerais savoir si vous seriez si gentil, c'est: 

  1. à quoi sert le retour fn, et 

  2. que fait le (content) ajouté à la fin de addListener(}(content));), puisque, autant que je sache, le contenu a déjà été défini dans la propriété setContent.

Je vous remercie!

javascriptgoogle-maps-api-3
13
Russ

Ne bouclez pas votre infowindow...
Vous n'avez besoin que de une instance de infowindow objet .
Déplacez-le dehors de la boucle, de même pour vos fonctions.
Dans la boucle, il suffit d’affecter son contenu au marker cliqué

var locations = [
  ["Split",     43.5148515, 16.4490835],
  ["Zagreb",    45.840196,  15.9643316],
  ["Dubrovnik", 42.6457256, 18.094058]
];

function initGoogleMap(){

  var infowindow = new google.maps.InfoWindow(); /* SINGLE */
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 4,
      center: new google.maps.LatLng(45, 15)
  });
  
  function placeMarker( loc ) {
    var latLng = new google.maps.LatLng( loc[1], loc[2]);
    var marker = new google.maps.Marker({
      position : latLng,
      map      : map
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.close(); // Close previously opened infowindow
        infowindow.setContent( "<div id='infowindow'>"+ loc[0] +"</div>");
        infowindow.open(map, marker);
    });
  }
  
  // ITERATE ALL LOCATIONS
  // Don't create functions inside for loops
  // therefore refer to a previously created function
  // and pass your iterating location as argument value:
  for(var i=0; i<locations.length; i++) {
    placeMarker( locations[i] );
  } 
  
}
google.maps.event.addDomListener(window, 'load', initGoogleMap);
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

29
Roko C. Buljan

Pour une raison quelconque, j'ai dû modifier un objet marqueur et accéder à ces données dans la fonction de lecture d'événement.

L'étendue de la fonction d'événement de clic sur le marqueur est un objet marqueur.

var infowindow = new google.maps.InfoWindow();

for(int i = 0; i < locations.length; i++){
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    var contentString = locations[i][0];

    marker = new google.maps.Marker({           
          position: latLng,
          map: map,
          contentString: contentString
    });
    marker.data = locations[i]; // adds object to marker object


    marker.addListener('click', function() {
        // read custom data in this.data   
        infowindow.setContent("<div id='infowindow'>"+ this.data[0] +"</div>");

        infowindow.open(map, this);
        map.setCenter(this.getPosition());
     });
}
0
dux