Closing any open info windows in google maps api v3

Question

As the title states, on a given event (for me this happens to be upon opening a new google.maps.InfoWindow I want to be able to close any other currently open info windows. Right now, I can open many at a time..but I want only 1 open at a time.

I am creating the info windows dynamically (i.e. I don't know ahead of time how many will be generated), so in the click event of the current info window (which is where I want all the other open ones closed) I don't have a reference to any of the other open info windows on which to call close(). I am wondering how I can achieve this. I am not an experienced JavaScript programmer so I don't know if I need to use reflection or something similar here.

Would the best way be just to save all the references in some sort of collection, then loop through the list closing them all?

Thanks.

Answer 1

I ran into the same problem and fixed it by creating a global info window.

var infowindow = new google.maps.InfoWindow();

Then I have a function to do the following on the click listener:

function getInfoWindowEvent(marker) {
    infowindow.close()
    infowindow.setContent("This is where my HTML content goes.");
    infowindow.open(map, marker);
}

This achieves what I think you're looking for b/c there is now only one info window on the map and I just close it, reload the content and open it again for the given marker.

Answer 2

It should be sufficient to have a global infowindow and then to change the position and content of that infowindow.

var infowindow = new google.maps.InfoWindow();

// Call this function to open an infowindow i.e. on click.
function respondToClick(latlng) {
  infowindow.setOptions({
    position: latlng,
    content" "Hello, world"
  });
}

As the same infowindow is used each time, you are guarantee'd to only ever have one open, and it uses less resources / memory than creating and then destroying multiple infowindows.

Answer 3

infowindow is local variable and window is not available at time of close()

var latlng = new google.maps.LatLng(-34.397, 150.644); var infowindow
 = null;

 ...

 google.maps.event.addListener(marker, 'click', function() {
     if (infowindow) {
         infowindow.close();
     }
     infowindow = new google.maps.InfoWindow();
     ... });
...

REF: Close all infowindows in Google Maps API v3

Answer 4

I have decided to create an array of all dynamically created Infobox. When you click on any first travel the array and then you close all open only one in which you have clicked.

var allInfos = [];

function closeInfos() {
        for (i = 0; i < allInfos.length; i++) {
            allInfos[i].close();
        }
}

Once created the infobox, dynamically are you adding it to the array each as follows:

allInfos.push(infowindow);

Answer 5

You need just one line: $(".gm-style-iw").next().click();

There's a div with this class, 'gm-style-iw', inside the infowindow. After, there is the div of the close button. So, this code will click every infowindow close button existing in the map

Answer 6

The best way to do this I think... is having an object with the infowindows that you have opened

I have two objects, infos have all the infowindows created and markers contains all markers with they infowindows so I just execute this functions that loop the infowindow object and close all the infowindows

function CloseInfowindows() {
  for (var mkey in infos) {
    var mobj = markers[mkey];
    mobj.infowindow.close();
  }
}