Google map locality label covered behind Poligon

Question

I used react-google-maps withGoogleMap for the google map in ReactJs, also I am using styles to change the custom view of my google map. in that map i have many polygons with fill color.

the problem is that, my custom polygons covered google map locality labels, so unable read proper label name.

here is my code

<GoogleMap
        options={{
          streetViewControl: false,
          fullScreenControl: false,
          disableDefaultUI: true,
          styles: mapStyle,
        }}
      >

here is the issue screenshot.

in the image you can see, it's unable to read the label behind the polygons

so how can I set labels top of the polygons?

Answer 1

I believe what happens when you create a polygon on the map is that it overlays the map which will overlay all the labels too, you can set opacity to below 1.

This is how you would do it using plain JS:

const polygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,

});

Answer 2

You can change the opacity level of the polygon on 'zoom_changed'.

So when the level of zoom is lower you can set the opacity level to below 1 and when it's higher you can set it to 1.

Check out this example here:

map.addListener('zoom_changed', () => {
    let zoom = map.getZoom();
    console.log("zoom changed: " + zoom);
    if (zoom < 6) {
      polygon.setOptions({
        fillOpacity: 0.3
      })
    } else {
        polygon.setOptions({
        fillOpacity: 1
      })
    }
  })
}

Well, I hope this helps.