Question 277447 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Google map locality label covered behind Poligon

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.
enter image description here

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?

Tags:

2

Answers


  1. 0

    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,

    });

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search