Propagating mouse events from clickable Google Maps overlays

Question

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.

On circle click, can't you trigger a map click? – Latheesan Oct 29 '13 at 14:13 — Latheesan, Oct 29 '13 at 14:13

score 7 · Accepted Answer · edited May 23 '17 at 12:33

7

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.

edited May 23 '17 at 12:33

Community

1
1

answered Oct 29 '13 at 14:14

Mathletics

31,135
5
47
57

Yes, you are probably right that this would be the default way of doing it, as long as the API does not have a "enableEventPropagation" option. But I am thinking that I would need to handle this on a more general level, and then I would need to do this for each and every event (mousemove, click, rightclick, etc). And also if there are other overlays between the map and the circle, I would need to handle event propagation to those as well. Just seems like a hassle, if you understand.. Would be nice to be able to let the events pass through the layers. But that is maybe not possible? – Knut Marius Oct 29 '13 at 14:42
1

It would depend on how the layers are built. Layers z-indexed on top of each other aren't necessarily nested in the DOM, so standard event bubbling likely doesn't apply. – Mathletics Oct 29 '13 at 14:56
Good point. It seems your solution is the best one then. Thank you! – Knut Marius Oct 29 '13 at 19:19

Propagating mouse events from clickable Google Maps overlays

1 Answers1