z-Index overlay in google maps version 3

Question

I'm trying to get an overlay in google maps api v3 to appear above all markers. But it seems that the google api always put my overlay with lowest z-index priority. Only solution i've found is to iterate up through the DOM tree and manually set z-index to a higher value. Poor solution.

I'm adding my a new div to my overlay with:

 onclick : function (e) {      var index = $(e.target).index(),          lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition());          icon = this.getIcon(),          x = lngLatXYposition.x - icon.anchor.x,          y = lngLatXYposition.y - icon.anchor.y       $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay'); } 

I've tried every property I could think of while creating my overlay. zIndex, zPriority etc.

I'm adding my overlay with:

$.view.overlay = new GmapOverlay( { map: view.map.gmap }); 

And GmapOverlay inherits from new google.maps.OverlayView.

Any ideas?

..fredrik

Answer 1

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);