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
Daniel Habtemariam
In the Solution, do you not mean
infoBubble.open(map, this);
rather than
infoBubble.open(this, marker);
?
Mike
Ah! Thanks. Sorry about the typo!
Muhammad Saqib
hi Mike.. can you provide me your code.. i really looking for this kinda solution…
Mike
Hi Muhammad,
All my code is in the post. If you’re having trouble, please provide your code and I will try to help.
You can post your code in a Gist on http://gist.github.com and send me the link on here.
Muhammad Saqib
https://gist.github.com/1626828
Mike
Here you go, https://gist.github.com/1627196
That SHOULD work. Not completely sure though. Also, be sure that your map canvas id is ‘map_canvass’ (not sure if you set it with two s’ on purpose).. document.getElementById(“map_canvass”)
Muhammad Saqib
thanks for replay mike..
i set my map_canvas to “map_canvas” its okay..
but the problem is the other values are overwritten… any idea?
Muhammad Saqib
sorry i set map_canvas to map_canvass..
Mike
Did you try using using the code I provided in: https://gist.github.com/1627196
Muhammad Saqib
yes mike but its not working..actually its overwriting the values, i tried to declare a javascript array and tried to push…. but still not working …
Mike
Alright, https://gist.github.com/1628647
That ^^^^^^^ should work. If it doesn’t, then I have NO idea. haha.
Muhammad Saqib
hello Mike ..
i am struggling with issue with Google map api V3 ..
actually my lat long are comming from database and i want to iterate them.. but when my loop iterate its only displaying one marker and which is last one..also i want multiple markers and multiple infowindows.. and overwrites others.. i am struggling with this issue from last 2 week .. my project deadline is comming.. i am sending you the link of my code kindly provide me your assistance i will be greatful..thanks
(i am not good in javascript )
http://pastebin.com/0A0JWyWh
Colin Wiseman
Cheers for the shout out! Totally rocks that you found my blog. Yeah couldn’t believe it when I found the solution to it and NOTHING on Google’s own docs talked about it!
Show’s you the bigger you are the harder it is to write good documenation (check out PayPal’s API docs…yikes!)
Mike
Yeah, I’ve worked with PayPal’s API.. not pretty. Haha. I’ve worked with a lot of APIs from Facebook to Tumblr to Freshbooks. Twitter is still my favorite in terms of documentation.
Bad Penguin
I confirm that i solved my problem using your solution.
I was trying to display many markes but because of pointer problems everyone of them was getting the same infowindow as the last marker added.
I used the “this” reference exactly as suggested and now my map is working.
Thanks!