Click event in Google Map InfoWindow not caught

Question

With Google Map v2, I would like to be able to trigger a function when clicking a text in the InfoWindow of a GMarker.

$(\".foo\").click(myFunction);

...

marke         


        

Answer 1

As far as I know, GMaps injects content into the InfoWindow programatically, so any bound event handlers on the injected elements will not fire unless you use event delegation:

$(".foo").live("click", myFunction);

See the live event handlers.

Answer 2

I couldnt get it working like Kevin Gorski explained...

with jquery 1.9.1 and maps api v=3.exp the following works:

infowindow.setContent('<a href="#" id="test">test</a>');
google.maps.event.addDomListener(infowindow, 'domready', function() {
    $('#test').click(function() {
        alert("Hello World");
    });
});

Answer 3

Try this:

google.maps.event.addListener(infowindow,"**domready**",function() {
    var Cancel = document.getElementById("Cancel");
    var Ok = document.getElementById("Ok");

    google.maps.event.addDomListener(Cancel,"click",function() {
        infowindow.close();
    });

    google.maps.event.addDomListener(Ok,"click",function() {
        infowindow.close();
        console.log(position);
        codeLatLng(position);
    });
});

Answer 4

simple solution and work for me. use onclick event in span.

<span class=\"foo\" onclick="test()">myText</span>

function test(){
alert('test OK');
}

Answer 5

If the event binding call is called before the call to openInfoWindowHtml as it is in your example, the span wasn't in the DOM while the first call was looking for elements with the class "foo," so no handler was attached.

You can either move that event handler to be called after openInfoWindowHtml, or use "live" event binding so that jQuery will monitor the DOM for any new elements with the given selector.

$(".foo").live('click', myFunction);

Answer 6

The simplest and fully describe solutions.

The infoWindow itself should only contain a placeholder div with a unique id:

    <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onOpen={e => {
          this.onInfoWindowOpen(this.props, e);
        }}
      >
        <div id="xyz" />
      </InfoWindow>

And inside the Mapcontainer, you define an onInfoWindowOpen callback, that inserts a single component/container with the onClick event and render it to a placeholder div:

    onInfoWindowOpen = () => {
        const button = (<button 
        onClick={
            () => {
            this.viewClinic(this.state.selectedPlace.slug)
            }
            }>
            View Details
        </button>);
        ReactDOM.render(React.Children.only(button),document.getElementById("xyz"));
        }

---

Here is a working example:

https://codesandbox.io/s/k0xrxok983

---

One more complete example MAP, Marker and InfoWindow:

https://codesandbox.io/s/24m1yrr4mj

If you have any questions so please comment.