javascript - Google Maps: Polygon and Marker Z-Index

Question

I have a Google Map with many markers (yellow circles), and I implemented a tool to draw polygons over the markers. However, the polygon is behind the markers while drawing (and stays behind when complete).

I tried changing the ZIndex in both markers and polygons, but it seems to alter the way in which markers are shown with respect to other markers, and not with respect to polygons. I also tried

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

How can I bring the polygon to the front?

Answer 1

This won't solve the problem, but it will explain why the things you tried didn't work.

The Maps API uses several layers known as MapPanes in a fixed Z order:

• 4: floatPane (infowindow)
• 3: overlayMouseTarget (mouse events)
• 2: markerLayer (marker images)
• 1: overlayLayer (polygons, polylines, ground overlays, tile layer overlays)
• 0: mapPane (lowest pane above the map tiles)

So the marker images in layer 2 are always above the polygons in layer 1. When you fiddle with the z-index on the markers, you're just adjusting them relative to each other. That doesn't do any good, because they are all in a layer above the polygons.

What can you do about this? The only solution I can think of is to create your own OverlayView for the polygons or the markers so you can put them in the MapPane you want.

Are your markers clickable, or are they just static images? If they aren't clickable, you could possibly get away with drawing them yourself in the mapPane. Then your polygons would be above them. Or the opposite: you could draw the polygons yourself in one of the higher layers, maybe in floatShadow.

The problem then is you have to do all of your own drawing, either with a canvas element or with DOM images. And your own mouse hit testing too if they are clickable.

There aren't a lot of good OverlayView examples out there, but I'll mention one of my own: a little library I wrote a while ago called PolyGonzo, where the polygonzo.js file has the OverlayView implementation. The code isn't great - I threw it together in too much of a hurry - but it may help give you some ideas.