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?

score 8 · Answer 1 · answered Sep 28 '11 at 13:30

8

Instead of using overlayLayer mapPanes, you should use overlayMouseTarget.

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

answered Sep 28 '11 at 13:30

sangwan

81
1
4

Is it me, or have they repaired this since? I find that they both work now – marksyzm Jul 07 '14 at 17:05

score 4 · Answer 2 · answered Jun 12 '12 at 12:49

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

score 1 · Answer 3 · edited Oct 09 '12 at 21:52

1

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.

edited Oct 09 '12 at 21:52

bkaid

51,465
22
112
128

answered Jul 16 '12 at 20:39

tim

3,823
5
34
39

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

3 Answers3

Linked