Adding event listener to infowindow Google Maps v3

Question

I tried to add some listeners for Info Window like:

//works
google.maps.event.addListener(markerInfoWindow, "closeclick", function()
{
    console.log('trigger close');
});

//doesn't work
google.maps.event.addListener(markerInfoWindow, "click", function()
{
    console.log('trigger close');
});

Is there a list of events for infoWindow in documentation I missed or is there another way to make things done?

Actually the problem is that I want to create an event listener to close infoWindow on mouseout

google.maps.event.addListener(markerInfoWindow, 'mouseout', function(){
    console.log('trigger close');
    self._setInfoWndClosed();
});

the self._setInfoWndClosed() is working correctly in context of closeclick event. And I end up finding out that actually listener doesn't work itself.

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

There is no documented "click" or "mouseover" event for an InfoWindow: The only documented events on an google.maps.InfoWindow (at present) are:

Events

closeclick Arguments: None

This event is fired when the close button was clicked.

content_changed Arguments: None

This event is fired when the content property changes.

domready Arguments: None

This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically.

position_changed Arguments: None

This event is fired when the position property changes.

zindex_changed Arguments: None

This event is fired when the InfoWindow's zIndex changes.

You can add listeners for "click" and "mouseover" events on the content of the InfoWindow.

score 0 · Answer 2 · answered Sep 27 '20 at 02:25

As this link shows:

https://gist.github.com/thebouv/38f91f81675aad85f15d

you can add a 'domready' event listener to your info window. Once inside the callback you can attach event listeners to any of the info windows elements by id (using the standard "addEventListener"). The "onclick" method is much better but it didn't work well in my case because I was using react.

score 0 · Answer 3 · answered Jan 17 '22 at 03:09

0

For adding listener inside infowindow, mine works like this..

    google.maps.event.addListener(infowindow, 'domready', function() {
       $('.classname').click(function(){
           //my function code                     
    });

answered Jan 17 '22 at 03:09

user8355629

53
6

score 0 · Answer 4 · edited May 19 '23 at 23:15

when you create the infowindow, you need to add an event listener to it

google.maps.event.addListener(infowindow, 'domready', function() {
    document.querySelectorAll('.infowindow-inner-class').forEach((el) => el.addEventListener("click", function(){
        console.log("clicked item inside infowindow")
    }));
});

Keep in mind the code above assumes you have an HTML element inside the infowindow which has the ".infowindow-inner-class" class

Adding event listener to infowindow Google Maps v3

4 Answers4

Linked