title: Set Display order of polygons in Google Maps
body: <p>I have a requirement to define some zones within a particular area using Polygons in Google Maps with the drawing library.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p>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.</p>
  
  <p>Heres a sample sahpe initialisation</p>
  
  <pre><code> 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();
            }
          });
  </code></pre>
  
  <p>Heres a pic of the smaller zone being zone 1 and in this scenario its unselectable despite having the higher zIndex</p>
  
  <p><a href="https://i.stack.imgur.com/10tBw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/10tBw.png" alt="enter image description here"></a></p>