javascript google maps api - one one infowindow open at a time..

Question

Hey guys, this questions relating to infowindow in the google maps API v3..

Currently I loop this function and place markers..

function addPostCode(zip, html) 
{
   geocoder.geocode( { 'address': zip}, function(results, status) 
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         map.setCenter(results[0].geometry.location);
         var marker = new google.maps.Marker({
         map: map,
         position: results[0].geometry.location,
         name: zip
      });
});

Now i would like to add an info windows with unique HTML, however i would like the following behaviour..

When an infowindow is opened by an event, any current infowindows will close leaving only the new one present..

Is this possible and how would i go about it? Finding documentation on this issue is proving difficult..

Thanks for your time..

Answer 1

You are probably better off asking the Google Groups for the Google Maps API v3 about this one, and any other related questions.

I haven't used API v3, but as far as I know, you can only have one info window open at a time, so this would happen automatically.

Answer 2

Create a single infowindow in your initialization. In your event/listener where you want to open the infowindow, you'd set the content and open the infowindow on the marker/location on the map.

// Initialize infowindow
var infowindow = new google.maps.InfoWindow({content: ''});

function add_marker(point, name, content)
{
   var marker = new google.maps.Marker({
      map: map,
      position: point,
      dragable: false,
      clickable: true,
      name: name
   });
   marker.content = content;
   google.maps.event.addListener(marker, 'click', function()
   {
      infowindow.content = marker.content;
      infowindow.open(map, marker);
   });
   return marker;
};

function addPostCode(zip, html) 
{
   geocoder.geocode( { 'address': zip}, function(results, status) 
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         map.setCenter(results[0].geometry.location);
         var marker = add_marker(results[0].geometry.location, zip, html)
      });
});

This question and answer helped me out quite a bit with the single or multiple Info Window issue:

Google Maps API v3 adding an InfoWindow to each marker

Answer 3

There are two ways to do this ... the first is to create a single info window and just use the .setOptions method of the info window to update the content.

The second way to do it is to simply set a module-level variable in your code to contain the "active" window ... and then if any infoWindow is open, call it's .close method before you open the new one.