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_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?

回答1:

Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.

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

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

回答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.

来源：https://stackoverflow.com/questions/6798971/how-can-i-bind-click-event-to-custom-overlay-with-google-maps-v3-both-in-ie-and