Search code examples
javascriptgoogle-mapsgoogle-maps-api-3polygons

Google maps route polygon on top


As continuing from previous question https://stackoverflow.com/a/35622032/75799

I have many polygon, which they cross each other or get on top of each other.

I wanted to put current active route on top of all the other route, so the color of the polygon shows green on top.

If you check following image, the active polygon is underneath other polygon. active is on bottom

This will set color change on active route.

directionsRenderer2.setOptions({
    polylineOptions: {
      strokeColor: 'green'
    },
    map:map
  });

Solution

  • Z-Index

    The order in which this polygon is drawn with respect to other overlays, including Polylines, Circles, GroundOverlays and TileOverlays, but not Markers. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index value is arbitrary. The default is 0.

    So you could achieve that using setZIndex(), take a look at Polygon Public Methods Documentation.

    Hope this helps.