CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Learning
Learning

Reputation: 305

How to make Google Maps' custom overlay above marker's click zone?

Check my sample code here https://jsfiddle.net/liangyongning/cd5wbzL8/5/

I create a custom overlay called MyOverlay, and add it to floatPane, I've check Google Maps' API, it told me the floatPane is above the overlayMouseTarget

  • overlayMouseTarget contains elements that receive DOM mouse events, such as the transparent targets for markers. It is above the floatShadow, so that markers in the shadow of the info window can be clickable. (Pane 5).
  • floatPane contains the info window. It is above all map overlays. (Pane 6).

Source: https://developers.google.com/maps/documentation/javascript/customoverlays#initialize

But the marker behind this overlay is clickable, even if a infowindow cover on it.

If I remove the overlay on line 27, everything works fine.

// var overlay = new MyOverlay(map);

What's wrong with my custom overlay? How to make it above all marker's click zone?

Upvotes: 2

Views: 1985

Answers (1)

Learning
Learning

Reputation: 305

Okay, I found the answer, I have to disable some mouse events on my custom overlay.

google.maps.event.addDomListener(this._div, 'click', function (e) {
  e.cancelBubble = true;
  e.stopPropagation && e.stopPropagation();
})

Here's the code: https://jsfiddle.net/liangyongning/cd5wbzL8/7/

Reference: Prevent google overlay/infowindow from allowing clicks through to markers underneath

Upvotes: 2

Related Questions