How can I render a custom OverlayView item behind a marker. When a marker and the overlayView item intersects, always overlayview item is drawn on top. Is there a way to adjust their z depth accordingly ?

Thanks

How can I render a custom OverlayView item behind a marker. When a marker and the overlayView item intersects, always overlayview item is drawn on top. Is there a way to adjust their z depth accordingly ?

Thanks

• javascript
• google-maps-api-3

3 Answers 3

Found the answer here.

In the onAdd method replace:

panes.overlayImage.appendChild(div);

with:

panes.mapPane.appendChild(div);

The overlayLayer pane is also rendered below the markers:

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

You'll probably need to adjust the z-order of the contents of the OverlayView, as outlined here. Make the DOM nodes in the OverlayView have lower z-order values than the marker.