Google Maps API V3 – Multiple InfoWindows

Multiple InfoWindows definitely work a bit different with the V3 API.

While porting an outdated script to the V3 API, I’ve soon found out, that …
one can attach HTML as the marker’s content and retrieve it from there again.

The following JavaScript example explains the method which I developed in detail.
Another advance: there’s always at most only one InfoWindow open at a time,
e.g. the user would close one info-window when opening another (which is another quite common issue with the V3 API). I’d also suggest to bind the map on-click event to close it, which is ordinary the expected behavior.

This array should to be defined globally (outside any function);
Hmm, in this example even a single var would be enough to hold the reference:

infos = [];

This code creates the markers, info-windows and the event listeners (should run inside a loop):

var title = 'This is the text for the markers tooltip on mouseover.';
var html = '<div class="info">This HTML will be attached to the marker.</div>';

var marker = new google.maps.Marker({

google.maps.event.addListener(marker, 'click', function() {

   /* close the previous info-window */

   /* the marker's content gets attached to the info-window: */
   var info = new google.maps.InfoWindow({content: this.content});

   /* trigger the infobox's open function */,this);

   /* keep the handle, in order to close it on next click event */


/* ... or one may optionally bind the map on-click event as well */
google.maps.event.addListener(map, 'click', function() {

This utility function closes any previously opened InfoWindow
and removes the reference between the InfoWindow and it’s marker:

function closeInfos(){

   if(infos.length > 0){

      /* detach the info-window from the marker ... undocumented in the API docs */
      infos[0].set("marker", null);

      /* and close it */

      /* blank the array */
      infos.length = 0;

Since the code is always storing a handle to the last opened info-window
at the same index position – the last opened info-window can be closed instantly!!

Like this it is much quicker – compared to the method of looping an array of info-windows,
which turned out to be way too slow … especially when handling large amounts of info-windows.

18 Responses to “Google Maps API V3 – Multiple InfoWindows”

  1. Cheak says:

    Really nice code !
    Thanks !

  2. Piyush Aggarwal says:

    thanks for the code 🙂

  3. rogwilsmith says:

    Good one! nice and good site.

  4. TCB13 says:

    Thanks dude! Saved my day 😉

  5. Mariah Ivery says:

    some times its a pain in the ass to read what blog owners wrote but this web site is real user friendly !

  6. Raghu says:

    Thanks… your code really helped me very much..

  7. Bill says:

    Could you explain what the infos[0].set(“marker”,null); is doing? Can’t find a reference to it?

    • Martin says:

      infos[0].set(“marker”,null); just detaches the last opened info-window from it’s marker,
      That’s necessary before removing the reference to the last opened info-window
      (once the handle is gone, it just can’t be accessed so easy anymore).

    • Bill says:

      Thanks for the reply. It’s working great.

      If I want to target a specific infowindow (either open or close it) from within closeInfo() in addition to closing the last opened window – do you know how to accomplish that? I need to open certain infowindows when others are closed. Using infowindow[3].close(); doesn’t work unless I make each instance of var info = new google.maps.InfoWindow({content: this.content}); a global variable by dropping the leading var from “var info = …. “

    • Martin says:

      .set() method isn’t even listed at: … I often just use the methods which I just see in the debugger, calling things by their name 🙂

      You could have an array with handles to all recently opened info-windows – but you need to maintain it somehow… To define which ones should open when one closes, this could be done by another array, which holds the rules (ids). Binding a parametrized close/open function to the marker’s ‘click’ event might the the most elegant way.

      Just be sure to keep the arrays as small as just possible –
      because looping of hundreds of elements consumes way to much run-time.

      Looping when loading the map is inevitable – but later on: just index access.

    • Bill says:

      Addressing the infowindow is where I’m stumbling. All my markers are in an array and I create an infowindow for each one but a statement such as this:

      function openIW(i){infowindow[i].open();}

      … doesn’t work. I get ‘infowindow not defined’. I guess I’m unclear on what namespace infowindows occupy in V3.

    • Martin says:

      When it says: ‘infowindow not defined’ – there most likely is no array called infowindow.
      You probably should learn JS syntax before getting deeper into the Maps JS API …
      The best advice I probably can give is:

  8. club penguin says:

    thanks for the help

  9. c says:

    THX works great!!!!!!!

  10. Shifali says:

    Excellent tutorial… searched the whole internet but could not solve my problem… finally done …thanx a tonn :):)

  11. Nico says:

    Hello !
    I’m interrested about closing previous Infobox opened like this…. do you have a page example ?