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

...

marker.openInfoWindowHtml("<span class=\"foo\">myText</span>");

does not work. Why the event isn't caught inside the InfoWindow ?

Gustie

Answer 1

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

Fere

Thanks Kevin, that works. I needed to put a click event on a jquery mobile internal #link and the internal page seems to load before the event fires?? just something to be aware of. – Tetrad

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

Situated

Answer 3

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.

Favrot

Answer 4

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

Scruggs

Answer 5

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

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

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

Sidoney

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.

Ruthful