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