javascriptgoogle-mapsgoogle-maps-api-3polygongoogle-maps-drawing

Set Display order of polygons in Google Maps

I have a requirement to define some zones within a particular area using Polygons in Google Maps with the drawing library.

I pretty much have the framework in place but i have noticed that sometimes the order of my polygons is not as i'd expect.

I use a zIndex property of 999999999 for my first polygon and decrease this value as additional polygons are drawn with the idea being that the first zone is the smallest with other zones ranging out from this - and with this setup the smaller polygons should still be selectable.

My problem is that this works sometime but then draing some of the larger further out zones it overlays on top of my other polygons despite having a lower zIndex value

Can anyone see where i'm going wrong or if there is another way to do this because zIndex doesn't always sees to apply.

Heres a sample sahpe initialisation

 google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
                zVal = zVal-1000000;
            if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);


            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;

            //Check to see if the shape has an id if not alert user to pick a zone
            newShape.type = e.type;
            newShape.id=curID;
            newShape.zIndex=zVal;
             $('#'+curID).attr("disabled", true);
            google.maps.event.addListener(newShape, 'click', function() {
            if(this.id =="" || this.id==null){
            alert('no id');
            }
              setSelection(newShape);
            });
            setSelection(newShape);
            clearSelection();
          }
        });

Heres a pic of the smaller zone being zone 1 and in this scenario its unselectable despite having the higher zIndex

enter image description here

Solution

  • The problem is how you set the zIndex:

    newShape.zIndex=zVal;

    Polygons are not HTMLElements, the zIndex is not a CSS-property, it's just a property to tell the API in which order the Polygons should be rendered.

    The Polygons will be rendered as objects in a <canvas/>, CSS may not be used for these objects, it simply matters when the objects will be drawn.

    To be able to draw the Polygon in the correct order the API needs to know when the zIndex-property of a Polygon changes(then the API must re-calculate the order of all Polygons and redraw them).

    But when you set the zIndex-property in the way you do it, the API will not realize the change.

    Solution: use the setter-method of MVCObject to set the zIndex:

    newShape.set('zIndex',zVal);

    the API now automatically will be notified about the property-change and set the order of the Polygons