web-dev-qa-db-fra.com

Comment définir une fenêtre contextuelle sur les marqueurs avec l'API Google Maps?

J'ai ce code où j'affiche et règle tous mes marqueurs. Comment puis-je ajouter un popup avec des informations sur les marqueurs avec ce code? J'ajoute la variable "i" sur le texte, mais elle active tous les marqueurs avec "test - 723", où 723 est la dernière valeur de la variable "i". Qu'est-ce qui ne va pas?

for (var i = 0; i < arraylng.length-1; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(arraylng[i], arraylat[i])
  });
  var infowindow = new google.maps.InfoWindow({
    content: " "
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('test: ' + i + '');
    infowindow.open(map, this);
  });
  markers.Push(marker);
}
javascriptgoogle-mapsgoogle-api
21
whoah

Commencez par définir la condition de la boucle sur i < arraylng.length. Pour l'instant, il ne capture pas le dernier élément de votre tableau.

Les variables JavaScript fonctionnent avec la portée de la fonction. Vous devez donc appeler une fonction pour chaque écouteur de marqueur afin de créer les références de variable correctes. Vous pouvez utiliser une fonction anonyme, comme on le voit ici , ou définir une fonction pour créer le port d'écoute de clic:

Plusieurs infoWindows:

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

Très probablement, vous ne voudrez pas ouvrir plus d’une fenêtre d’InfoWindow en même temps, car il est agaçant de devoir cliquer sur la fermeture. x. Dans ce cas, vous ne voulez plus qu’un seul objet InfoWindow et définissez le contenu lorsque vous cliquez sur le marqueur:

Une seule fenêtre d'information:

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

  for (var i = 0; i < arraylng.length-1; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(arraylng[i], arraylat[i]),
      map: map
    });

    makeInfoWindowEvent(map, infowindow, "test" + i, marker);

    markers.Push(marker);
  }
}

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}
38
Heitor Chang
var marker = new google.maps.Marker({
              position: myLatLng,
              ....
              content: point[4]
          });
google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
          });

Code dans la boucle. Cela a fonctionné pour moi parfaitement.

1
user3635230

c'est la zone où vous pouvez ajouter votre contenu de popup

var infowindow = new google.maps.InfoWindow({
                content: "Add your popup content here"
              });

et ceci est pour montrer votre popup

marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

Le code ci-dessous montre son fonctionnement et son utilisation.

features.forEach(function(feature) {
          var infowindow = new google.maps.InfoWindow({
                    content: "Add your popup content here"
                  });
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            icon: "image.png",
            /*icon: icons[feature.type].icon,*/
            title: "Title for marker",
            map: map
          });
          marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
        });

1
Rishabh Jhalani

En effet, la variable i n’est pas utilisée dans la boucle mais lorsqu’on clique sur le marqueur - puis i est égal au dernier index + 1 ... La addListener est asynchrone, pas synchrone.

Supprimez infowindow.setContent('test: ' + i + ''); et remplacez content: " " par content: 'test: ' + i. Cela devrait résoudre votre problème.

0
dda