Placing a MapLabel on top of a Polygon in Google Maps V3

Question

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

You should post your solution as an answer, and accept it, to help others in the future — duncan, Feb 08 '12 at 10:08
Change to markerLayer instead of floatPane if you use draggable or editable. — hammurabi, Sep 26 '16 at 15:03

score 13 · Answer 1 · answered Jan 28 '14 at 07:08

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
});

score 5 · Answer 2 · answered Sep 25 '13 at 16:16

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

});

I can't get this to work. The parentNode style index change is showing correctly in the inspector but the labels remain hidden. — Dom Vinyard, Jan 26 '14 at 13:49

score 0 · Answer 3 · answered Sep 17 '15 at 23:58

var maplabel = new MapLabel....  
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex);

jQuery made it pretty simple for me without changing maplabel.js I also found an alternate solution

$(maplabel.getPanes().mapPane).addClass('map-pane');

and then defining the z-index in a stylesheet

score 0 · Answer 4 · answered Mar 31 '16 at 20:51

I sketched up this CodePen example utilizing the gmaps-labels class. It is based on the fiddle in the Q above and adds the ose of a LabelOverlay class. The class requires a new google.maps.LatLng, dimensions (in LatLng units) of a box centered around the label's point (If the label would overflow this box, hide it, and some CSS. Heres a code stub, check out the demo in the CodePen.

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121,
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03;



var overlay1 = new LabelOverlay({
    ll      : myLatlng,

    minBoxH     : MIN_BOX_H,
    minBoxW     : MIN_BOX_W,

    maxBoxH     : MAX_BOX_H,
    maxBoxW     : MAX_BOX_W,

   ...

   label        : "I want on top",
   map      : map
});

score 0 · Answer 5 · answered Feb 08 '12 at 14:15

0

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.

answered Feb 08 '12 at 14:15

Chris Broadfoot

5,082
1
29
37

Placing a MapLabel on top of a Polygon in Google Maps V3

5 Answers5

Linked