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

Answer 1

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

Answer 2

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

Answer 3

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.