Google Maps API v3 infowindow close event/callback?

Question

I like to keep track of any and all infowindows that are open on my Google Maps interface (I store their names in an array), but I can\'t figure out how to remove them from

Answer 1

there's an event for infowindows call closeclick that can help you

var currentMark;
var infoWindow = new google.maps.InfoWindow({
            content: 'im an info windows'
        });
google.maps.event.addListener(marker, 'click', function () {
          infoWindow.open(map, this);
          currentMark = this;

});
google.maps.event.addListener(infoWindow,'closeclick',function(){
   currentMark.setMap(null); //removes the marker
   // then, remove the infowindows name from the array
});

Answer 2

Try this:

var closeBtn = $('.gm-style-iw').next();
closeBtn.click(function(){
    //other things you want to do when close btn is click
    that.infowindow.close();
});

I overwrite this click function because the click button won't work in safari after I change the css/position of it.

Answer 3

The only consistent solution I've found here is to retain a pointer to the infoWindow and check its .getMap() method whenever you need to validate whether it has been closed.

The reason for this is that clicking another element can cause the infoWindow to be dismissed for other reasons... without the closeclick event firing.

var infoWindow = new google.maps.InfoWindow({ content: 'Something to put here.' });
infoWindow.open(map, infoWindow);

setInterval(function ()
{
    console.log("infoWindow is bound to map: "+(infoWindow.getMap() ? true : false));

}, 1000);

... If you literally only care if the infoWindow was closed using the "X" button, then monitoring closeclick is fine. However, there are other reasons it may be or have been closed.

Answer 4

Simplifying and extending the most upvoted solution, you can create the marker during the handling of the marker click event, letting you package its removal due to the x icon's closeclick event at the same time.

Here's an example that includes duplicate info window creation avoidance by tacking a boolean hasInfoWindow status on markers.

  newMarker.addListener('click', function () {
    // If a marker does not yet have an info window, create and show it
    if (newMarker['hasInfoWindow'] !== true) {
      newInfoWindow = new google.maps.InfoWindow({content: infoContent}); 
      mapSet['infoWindowsObj'].push(newInfoWindow);
      newMarker['hasInfoWindow'] = true;
      newInfoWindow.open(mapSet, newMarker);

      // If info window is dismissed individually, fully remove object
      google.maps.event.addListener(newInfoWindow, 'closeclick', function () {
        newInfoWindow.setMap(null);
        newMarker['hasInfoWindow'] = false;
        mapSet['infoWindowsObj'].filter(arrayItem => arrayItem !== newInfoWindow);
      });
    }
  });

Then if you want to remove all open info windows due to a click event on a map, you can iterate through the contents of mapSet['infoWindowsObj'] to fully remove each.

I believe this behavior lets you get away with using infowindow for most cases without having to reimplement the whole thing as per google's custom popup example.