Resolving Google Map Labels Always Appearing Under Overlays and Shapes
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.