z-Index overlay in google maps version 3

You can't change the zIndex of an OverlayView (it has no such property), but it holds panes that contains DOM nodes. That's where you can use the z-index property;

...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...

If anyone was having the same problem as I was, here is my problem and solution:

I needed an OverlayView which would add tooltips to markers, but my popup overlay kept showing behind the markers.

I implemented a subclass of the OverlayView as per the Google documentation: https://developers.google.com/maps/documentation/javascript/customoverlays

When you write your custom OverlayView.prototype.onAdd function, you need to specify to which Pane to attach your overlay. I just copied the code without actually reading the surrounding explanation.

In their code, they attach the overlay to the overlayLayer pane:

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

But there are many different MapPanes you can use:

"The set of panes, of type MapPanes, specify the stacking order for different layers on the map. The following panes are possible, and enumerated in the order in which they are stacked from bottom to top:"

• MapPanes.mapPane (Level 0)
• MapPanes.overlayLayer (Level 1)
• MapPanes.markerLayer (Level 2)
• MapPanes.overlayMouseTarget (Level 3)
• MapPanes.floatPane (Level 4)

I wanted the overlay to hover over all other info on the map, so I used the floatPane pane and problem solved.

So, instead of :

this.getPanes().overlayLayer.appendChild(div)

you use this :

this.getPanes().floatPane.appendChild(div);