How can I bind click event to custom overlay with Google maps v3 both in IE and Firefox

Question

I've already subclass my overlay object under the instruction of google document, 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 [https://mcmap.net/q/434618/-make-custom-overlay-clickable-google-maps-api-v3]
        alert("Clicked");
    } );

}

My code can work well ONLY in IE, but in Firefox and Chrome, the click event will not be triggered anymore.

So how to solve the problem?

Coronet

Answer 1

Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.

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

Petrolic

Is it me, or have they repaired this since? I find that they both work now – Wendall

Answer 2

I know this is an old post, but if you were wondering, here is the solution:

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

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

to:

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

Tintinnabulation

Answer 3

Also note although your click events will be captured on desktop even if you use overlay pane, for touch events to work, mouse target pane is necessary.

Gaughan