z-Index overlay in google maps version 3

Posted by fredrik on Stack Overflow See other posts from Stack Overflow or by fredrik
Published on 2010-04-21T12:00:13Z Indexed on 2010/04/21 12:03 UTC
Read the original article Hit count: 648

Filed under:
|

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

© Stack Overflow or respective owner

Related posts about google-maps

Related posts about JavaScript