Google Maps: Polygon and Marker Z-Index

I know this question is old but for future users I wanna share my approach:

Shapes with higher zIndex values displaying in front of those with lower values. For this example I am using Polygon but is similar for other shapes:

var globalZIndex = 1; //Be sure you can access anywhere
//... Other instructions for creating map, polygon and any else
polygon.setOptions({ zIndex: globalZIndex++ });

Notice that markers have a method setZIndex(zIndex:number).

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.