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

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_chi开发者_开发技巧ld = 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?

Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.

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

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);

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.