Skip to content

Google Maps API – Multiple Markers, Multiple InfoWindows/InfoBubbles

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

20 Comments

  1. Daniel Habtemariam Daniel Habtemariam

    In the Solution, do you not mean
    infoBubble.open(map, this);
    rather than
    infoBubble.open(this, marker);
    ?

  2. Ah! Thanks. Sorry about the typo! 😛

    • Muhammad Saqib Muhammad Saqib

      hi Mike.. can you provide me your code.. i really looking for this kinda solution…

      • 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.

          • 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 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 Muhammad Saqib

            sorry i set map_canvas to map_canvass..

          • Muhammad Saqib 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 …

    • Muhammad Saqib 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

  3. 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!)

    • 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.

  4. 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!

  5. Mike – Thank you!!
    I was having the *exact* same problem, and your posted solution worked perfectly.

  6. Sam Sam

    Hi,
    what about loading markers and assigining different icon to them, say having them into groups and you need to give each group its own marker.

    Thanks

  7. Thanks so much for this post and the link to the solution. I tore my hair out for an hour trying to get this to work and this solution worked beautifully. Thanks again!

  8. You sir, are a lifesaver. This has been bugging me for ages! Many thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *