Question

In my application using Google maps APIv3, I am trying to randomly generate some markers attached with a polyline. I have done the following:

//Loop to add locations and draw line
var path= polyline.getPath();
for(var i=0;i<route.length;i++)   //route is an array containing some latlng's
    {
        var marker= new google.maps.Marker({position:route[i],map:map});
        path.push(route[i]);
    }

//Event Listener's
google.maps.event.addListener(marker,'click',function(event)
    {
        iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng()); 
          //iwindow is the InfoWindow variable
        iwindow.open(map,marker); 
    });  

The issue here is that the marker on click always has the marker reference of the last marker in the for loop. So only the final marker displays the infowindow.

How do I change my code so that every marker click generates an InfoWindow?

Answer 1

The callback is the same for each marker, so it’s fine to define that outside the scope of the loop. But a separate listener needs to be attached to each marker, so put that code inside the loop.

function showPopup(event) {
    iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng()); 
    iwindow.open(map,marker); 
});  

for(var i=0;i<route.length;i++) {
    var marker= new google.maps.Marker({position:route[i],map:map});
    path.push(route[i]);
    google.maps.event.addListener(marker,'click',showPopup);
}