Google Maps API V3 - Markers All Share The Same InfoWindow

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 translat

Solution 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]); 

Solution 2:

When setting the marker object (var marker = new ...) change this line: "title: club[0]," to "title: club[i],". Yes, just change the 0 to i.

That should solve the problem.

Try this link for a tutorial on Google Maps API with examples.

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

It should be very easy and helpful.