Is there a way to have an overlay on a Google map (such as a circle or polygon) that is clickable, but still allows mouse events to pass through to the underlying map? Currently, it seems like a clickable overlay will always prevent interactions with the map.
For example, I would like both click handlers to be triggered 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 haven't been able to find a property on the overlay that enables event propagation, other than setting clickable=false which disables event handlers on the overlay itself.