I am currently working on a project that is dealing with using the Google Maps API. For a page of the website, it required that we grab the 10 nearest locations and put some markers on the map for those locations.
So, say I got back 10 locations, I would loop through the results and place the markers on the map. Google Maps InfoWindow wasn’t quite what I needed, so I worked with a library called InfoBubble:
http://code.google.com/p/google-maps-utility-library-v3/source/checkout
The Problem:
While looping through markers and trying to add a click event to each marker to pop up a InfoWindow or InfoBubble:
The click event was always binded to the last marker.
The Solution:
After googling for a while, I FINALLY came across a solution provided by @colinwiseman on his blog at: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
The variable marker inside where we are trying to set the click event was changed to this along with the contentString variable was changed to an attribute on marker called html. Best said by @colinwiseman: “as you were calling infowindow.open(map, marker) javascript engine’s memory location thingymabob (not good with names) held the last reference to marker”.
This is basically just a re-blog of his post, but in regards to using InfoBubble.
Again, thanks to Colin and his post on his blog at http://you.arenot.me