javascript - Google Maps API v3 - Markers All Share The Same InfoWindow

Question

I've been digging around everywhere and I can't seem to figure this out. It's driving me crazy! I'm a newbie to javascript in general, so I can't quite put a finger on the translation that would fix my issue. I noticed that a lot of people have this problem, but they all seem to use more advanced(or just confusing) code than I. Anyway, here goes!

I've been having the problem where all of my markers share the same content.

function initialize() {
var myOptions = {
    center: new google.maps.LatLng(34.151271, -118.449537),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

setMarkers(map, clubs);

}

var clubs = [
['Poop', 34.223868, -118.601575, 'Dookie'],
['Test Poop', 34.151271, -118.449537, 'Test Business']
];

function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/image.png',
    new google.maps.Size(25, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var club = locations[i];
var myLatLng = new google.maps.LatLng(club[1], club[2]);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    shape: shape,
    title: club[0],
});
google.maps.event.addListener(marker, 'click', function(){
    infowindow.setContent(club[3]);
    infowindow.open(map, this);
});
}
}

I know I'm crappy, but someone please help me! :P

Answer 1

The problem is because you're setting the event listener for the marker click within a loop. So all the markers end up only getting the content for the last of your markers. Try this instead. Create a new global function:

function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
} 

Then within your loop, replace this:

google.maps.event.addListener(marker, 'click', function(){
    infowindow.setContent(club[3]);
    infowindow.open(map, this);
});

with this:

// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, club[3]);