Google Maps API v3 infowindow close event/callback?

JavascriptJqueryGoogle MapsGoogle Maps-Api-3

Javascript Problem Overview


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 my array when they are closed via the "x" in the upper right hand corner of each one.

Is there some sort of callback I can listen for? Or maybe I can do something like addListener("close", infowindow1, etc ?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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.

Solution 4 - Javascript

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Solution 5 - Javascript

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.

Solution 6 - Javascript

this is very simple find the class of close infowindow button, that is '.gm-ui-hover-effect'

trigger to close infowindow

$('.gm-ui-hover-effect').trigger('click');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionColinView Question on Stackoverflow
Solution 1 - JavascriptJorgeView Answer on Stackoverflow
Solution 2 - JavascriptBen GuildView Answer on Stackoverflow
Solution 3 - JavascriptTina ChenView Answer on Stackoverflow
Solution 4 - JavascriptMohamed ElNadyView Answer on Stackoverflow
Solution 5 - JavascriptRobView Answer on Stackoverflow
Solution 6 - JavascriptQaisar MahmoodView Answer on Stackoverflow