Like many of you out there that use Google Maps, when v3.0 of it came out you jumped at the chance to use it!  But I couldn’t get the multiple markers, multiple info windows to work, no matter what I found on Google’s site.

Searching got me to this blog:

http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows

And it states this guy is writing a book on this very subject.  So this should have the answer.  Well bollocks it did!  Stop writing your book now matey!

The Problem

When in a loop adding new markers many of you have probably done something similar:

for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});

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

This always showed the last marker that was bound to map so the info window always appeared on the last marker. Bit of a problem really.

After reading http://www.svennerberg.com/2010/04/the-state-of-this-blog/ it showed me my mistake and the actual solution…

The Solution

var infowindow = null;
.
.
.
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});

for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}

Notice the change from marker to this. As you have all seen the event fires for each marker, but as you were calling infowindow.open(map, marker) javascript engine’s memory location thingymabob (not good with names) held the last reference to marker. But you had passed in the marker to the event, so by calling this in place of marker, you get what you are looking for.

Hope this helps someone out.

[Edit]

And to auto center your map once all your points are in:

function AutoCenter() {
//  Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
//  Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
//  Fit these bounds to the map
map.fitBounds(bounds);
}

assuming you have saved each marker in a markers array, and map is a global variable on your page.

[Edit 2]

To help someone below in the comments, I created this map to help solve someone’s issue.  Hopefully it did.  I really should have had a full working example at the start but I can be quite lazy sometimes :S  It’s done now, so you can stop complaining ;)

[Edit 3]

Updated the code so that the infowindow was on the outside of the loop.  It doesn’t need to be inside the loop.