How to set a popup on markers with Google Maps API?

Question

I have this code where I display and set all my markers. How can I add a popup with some information on markers with this code? I add "i" variable on text, but it sets on all markers popup with "test - 723", where 723 is last value of the "i" variable. What is wrong?

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);
}

score 44 · Accepted Answer · edited May 23 '17 at 12:26

First, change the loop condition to i < arraylng.length. Right now it is not capturing the last element of your array.

JavaScript variables works with function scope so you need to call a function for each marker listener to create the correct variable references. You can use an anonymous function, as seen here, or define a function for creating the click listener:

Multiple infoWindows:

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

Most likely you will not want more than one InfoWindow open at the same time, because it is annoying to have to click on the close x. Then you will only want one InfoWindow object, and set the content as the marker is clicked:

Single InfoWindow:

...
  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);
  });
}

Your jsfiddle links have expired. – Josef Van Zyl Jul 21 '15 at 14:45 — Josef Van Zyl, Jul 21 '15 at 14:45

score 2 · Answer 2 · edited Nov 14 '21 at 17:36

2

var infowindow = new google.maps.InfoWindow();
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 inside loop. This worked for me perfectly.

edited Nov 14 '21 at 17:36

BenVida

1,796
1
16
25

answered Dec 09 '14 at 08:46

user3635230

31
1

Very nice and simple solution. I just tried and it works! The only thing was missing is the declaration for `infowindow` so I added an edit to the solution. – BenVida Nov 13 '21 at 15:12

Rishabh Jhalani · Answer 3 · 2018-08-24T11:00:09.150

this is the area where you can add your content of popup

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

and this is for showing your popup

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

Below code shows how its work and use.

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);
        });
        });

score 0 · Answer 4 · answered Jul 13 '12 at 08:52

0

That's because the variable i is not used in the loop but when the marker is clicked -- and then i is equal to the last index + 1... The addListener is asynchronous, not synchronous.

Remove infowindow.setContent('test: ' + i + ''); and replace content: " " with content: 'test: ' + i. This should fix your problem.

answered Jul 13 '12 at 08:52

dda

6,030
2
25
34

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ does an excellent job of explaining the solution – stephen ebichondo May 24 '16 at 15:24

How to set a popup on markers with Google Maps API?

4 Answers4

Linked