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 [http://stackoverflow.com/questions/3361823/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?

Answer 1

Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.

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