How to associate a click event with a custom overlay with Google maps v3 in both IE and Firefox

Question

I have already subclassed my overlay object according to the google document statement, and my onAdd () function is listed below:

MyOverlay.onAdd() { var div_parent = document.createElement("DIV"); var div_child = document.createElement("DIV"); div_child.innerHTML = "Click Me"; div_parent.appendChild( div_child ); this.getPanes().overlayLayer.appendChild(div_parent); var this = that; google.maps.event.addDomListener( div_parent, 'click', function(){ google.maps.event.trigger(that, 'click'); // from [http://stackoverflow.com/questions/3361823/make-custom-overlay-clickable-google-maps-api-v3] alert("Clicked"); } ); } 

My code may work fine ONLY in IE, but in Firefox and Chrome the click event will no longer fire.

So how to solve the problem?

Answer 1

Instead of using overlayLayer mapPanes you should use overlayMouseTarget.

Link: http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

Answer 2

I know this is an old post, but if you're interested, here is the solution:

In the above code, you need to change the overlay function:

this.getPanes () overlayLayer.appendChild (div_parent) ;.

in

this.getPanes () overlayMouseTarget.appendChild (div_parent) ;.

Answer 3

Also note that the events of your click will be captured on the desktop, even if you use the overlay panel, the target mouse panel is necessary to trigger touch events.