z-Index overlay in google maps version 3

Question

Hi,

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

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

Answer 2

Setting z-index to 104 for the overLay layer seems to be the "magic" number" if you care about interacting with the markers (i.e. dragging markers). Any higher than 104 and you can not interact with the markers. Wondering if there is a less brittle solution...