Placing a MapLabel on top of a Polygon in Google Maps V3
This is probably a late find.. but hope someone would find this useful.
If you don't want to use floatPane
(John's Solution) as this will be always on top of everything, and want to give a custom zIndex.. Edit the maplabel.js. Add the following line just before the end of MapLabel.prototype.onAdd = function() {
if (canvas.parentNode != null) { canvas.parentNode.style.zIndex = style.zIndex;}
Now you can pass zIndex
while creating a maplabel:
var mapLabel = new MapLabel({ text: "abc", position: center, map: map, fontSize: 8, align: 'left', zIndex: 15});
If you don't want to touch maplabel.js
, you can add this function to change the z-index
of the parent of the labels (although if you have other canvas
elements, you may need to alter the function):
//change the z-index of the canvas elements parents to move them above polygon layergoogle.maps.event.addListenerOnce(map, 'idle', function(){//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elementsvar canvasElements = jQuery('canvas'); //jquery for easy cross-browser support for(var i=0; i<canvasElements.length; i++){ canvasElements[i].parentNode.style.zIndex = 9999; }});
Great to see that you're using the MapLabel utility library!
As you've found out, the MapLabel sits in a different map pane. zIndex
is only respected within a certain pane.