Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Propagating mouse events from clickable Google Maps overlays

Is it possible to have an overlay in a Google map (circle, polygon, etc.) that is clickable, but still propagates mouse events down to the underlying map? Currently it seems like for instance a clickable circle will always hide the events from the map.

Example: Here I would like both click handlers to fire when you click the circle: http://jsfiddle.net/tW9SE/

var circle = new google.maps.Circle({
    map: map,
    center: center,
    radius: 100000,
    clickable: true
});

google.maps.event.addListener(map, "click", function(){
    alert("Map clicked");
});

google.maps.event.addListener(circle, "click", function(){
    alert("Circle clicked");
});

I cannot find a property on the overlay that allows for event propagation, except from setting clickable=false, and thereby disable event handlers on the overlay itself.

like image 780
Knut Marius Avatar asked Feb 14 '23 20:02

Knut Marius


1 Answers

Just trigger the click yourself:

google.maps.event.addListener(circle, "click", function(){
    alert("Circle clicked");
    google.maps.event.trigger(map, 'click', null);
});

More info in Marcelo's answer about programmatically triggering clicks on a Google map.

like image 143
Mathletics Avatar answered Feb 17 '23 11:02

Mathletics