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

Answer 1

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();
  }
}

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

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 5

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 6

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);