Placing a MapLabel on top of a Polygon in Google Maps V3
Solution 1
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
});
Solution 2
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 layer
google.maps.event.addListenerOnce(map, 'idle', function(){
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support
for(var i=0; i<canvasElements.length; i++){
canvasElements[i].parentNode.style.zIndex = 9999;
}
});
Related videos on Youtube
John
Updated on June 04, 2022Comments
-
John about 2 years
I'm trying to place a MapLabel on top of a Polygon in Google Maps V3. I've tried to set the MapLabel zIndex to 2 and the Polygon zIndex to 1 without any luck. Isn't this possible since the Polygon doesn't really follow zIndex?
I've created a jsFiddle for you guys to check out: http://jsfiddle.net/7wLWe/1/
Solution: In
maplabel.js
change:mapPane.appendChild(canvas);
to:
floatPane.appendChild(canvas);
The reason is because
floatPane
is above all map layers (pane 6)http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView
-
duncan over 12 yearsYou should post your solution as an answer, and accept it, to help others in the future
-
hammurabi over 7 yearsChange to markerLayer instead of floatPane if you use draggable or editable.
-
-
Dom Vinyard over 10 yearsI can't get this to work. The parentNode style index change is showing correctly in the inspector but the labels remain hidden.