Resolving Google Map Labels Always Appearing Under Overlays and Shapes

March 8th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

And for my next trick… I will make labels appear above overlays produced using the Google Maps API.

Ok, I’m far from a magician (some might say I’m good at making money, beer and food disappear) but when coding I sometimes wish that certain things could just be made to work. When playing with the maplabel.js Map Label Utility Library recently this was one of them times.

The problem I faced was, regardless of the zIndex setting that I put on the labels, they would just not appear above any other overlays I added to the map, for example, polygons or circles. I even tried changing the order of the code so that the labels would be added last to no avail.

After lots of digging around in the code and trying multiple things, I finally managed to get the labels to respect the zIndex I was giving them by making the following change in maplabel.js (line 120 of the current revision):




Alternatively, if you’re using the compiled version you’ll want to make the following change:




In making the quick changes above, the labels will then begin to appear on top of any other shapes or overlays present on the map.

This entry was posted on Friday, March 8th, 2013 at 9:37 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (6)
  1. Douglas says:

    works fine, thanks… but the labels appears above InfoWindows too… so, to fix it you have to do this… in maplabel.js, line 40.. modify “this.set(‘zIndex’, **1e3**)” to “this.set(‘zIndex’, **1e1**)”

    Boom! Perfect!

  2. Yog says:

    According to this answer ( ) it might be better to use “overlayShadow” instead of “floatPane”. This way labels won’t block markers.

  3. Yog says:

    Seems like this way label’s overlay overlaps markers and makes them unclikable.

  4. Sergi says:

    Thank you for that!! I was really struggeling to make it work… because I had the very same issue and it work brilliantly.

  5. saad says:

    Thanks for sharing this, it really helped.

  6. Philip says:

    Thank you for posting this. I’ve been toiling for the better part of an afternoon trying to find this information. You are a true magician!