Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps: Polygon and Marker Z-Index

I have a Google Map with many markers (yellow circles), and I implemented a tool to draw polygons over the markers. However, the polygon is behind the markers while drawing (and stays behind when complete).

Active polygon drawing tool beneath the markers.

I tried changing the ZIndex in both markers and polygons, but it seems to alter the way in which markers are shown with respect to other markers, and not with respect to polygons. I also tried

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

How can I bring the polygon to the front?

like image 681
Nicolas Avatar asked Mar 26 '13 00:03

Nicolas


People also ask

What is zIndex in Google map?

Marker zIndex is one of the most requested features on our issue tracker - today's release gives you the ability to control the order in which markers are displayed on the map [Issue 7762]. This gives you control over which tap target your user is most likely to hit by setting the zIndex property on each marker.

How do I get a marker position on Google Maps?

You can add a simple marker to the map at a desired location by instantiating the marker class and specifying the position to be marked using latlng, as shown below.


1 Answers

This won't solve the problem, but it will explain why the things you tried didn't work.

The Maps API uses several layers known as MapPanes in a fixed Z order:

  • 4: floatPane (infowindow)
  • 3: overlayMouseTarget (mouse events)
  • 2: markerLayer (marker images)
  • 1: overlayLayer (polygons, polylines, ground overlays, tile layer overlays)
  • 0: mapPane (lowest pane above the map tiles)

So the marker images in layer 2 are always above the polygons in layer 1. When you fiddle with the z-index on the markers, you're just adjusting them relative to each other. That doesn't do any good, because they are all in a layer above the polygons.

What can you do about this? The only solution I can think of is to create your own OverlayView for the polygons or the markers so you can put them in the MapPane you want.

Are your markers clickable, or are they just static images? If they aren't clickable, you could possibly get away with drawing them yourself in the mapPane. Then your polygons would be above them. Or the opposite: you could draw the polygons yourself in one of the higher layers, maybe in floatShadow.

The problem then is you have to do all of your own drawing, either with a canvas element or with DOM images. And your own mouse hit testing too if they are clickable.

There aren't a lot of good OverlayView examples out there, but I'll mention one of my own: a little library I wrote a while ago called PolyGonzo, where the polygonzo.js file has the OverlayView implementation. The code isn't great - I threw it together in too much of a hurry - but it may help give you some ideas.

like image 106
Michael Geary Avatar answered Sep 17 '22 13:09

Michael Geary