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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With