codefx.biz

infos = [];

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({
   title:title,
   content:html,
   map:map,
   draggable:false,
   position:point
});

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

   /* close the previous info-window */
   closeInfos();

   /* 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 */
   info.open(map,this);

   /* keep the handle, in order to close it on next click event */
   infos[0]=info;

});

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

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 */
      infos[0].close();

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

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

1. Cheak says:

   2012-01-20 at 16:31

   Really nice code !
   Thanks !
   • Matthew says:

     2012-02-01 at 22:59

     I agree. I spent all morning looking for a solution like this.
2. Piyush Aggarwal says:

   2011-12-28 at 08:21

   thanks for the code
3. rogwilsmith says:

   2011-12-11 at 17:09

   Good one! nice and good site.
4. TCB13 says:

   2011-12-05 at 00:46

   Thanks dude! Saved my day
5. Mariah Ivery says:

   2011-11-28 at 15:15

   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:

   2011-10-07 at 07:21

   Thanks… your code really helped me very much..
7. Bill says:

   2011-09-21 at 19:43

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

     2011-09-21 at 19:59

     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:

     2011-09-21 at 20:17

     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:

     2011-09-21 at 20:31

     .set() method isn’t even listed at: http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindow … 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:

     2011-09-21 at 21:28

     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:

     2011-09-22 at 00:47

     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: http://getfirebug.com/
8. club penguin says:

   2011-08-21 at 22:32

   thanks for the help
9. c says:

   2011-05-18 at 21:22

   THX works great!!!!!!!
10. Shifali says:

    2011-03-22 at 07:29

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

    2011-03-20 at 18:59

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

    Nico
    • Martin says:

      2011-03-21 at 11:17

      I offer Google API Scripting as a service, in case you should need support.

Tags: close InfoWindow, disable multiple InfoWindows, Example, Google Maps, Google Maps API V3, InfoWindow, InfoWindows, JavaScript, Last InfoWindow, Marker, multiple InfoWindows, open InfoWindow