@react-google-maps/api”: “^2.13.1” | https://www.npmjs.com/package/@react-google-maps/api
Hi Everybody. My name is Hassan & I’m a freelance React JS developer. I have been working with this API to build project for a client on Upwork. What I want to achieve is
A Google Map with a button to toggle custom Polygon Shapes’s visibility on & off. The components first render with out a polygon and when the user clicks on the button the polygon loads up to highlight USA states where the health centers are.
It is working till here. However when again clicking on the button I want the polygon to be removed/hidden from Map. However once mounted to the Map the polygon does not go away. It changes opacity of fill color of polygon but does not go away.
Here is what I have tried already
Passing true/false as “visible” Prop value to Polygon component based on state. But once rendered the Polygon is not removed even after passing false as a prop.
The second method I tried is using State to conditionally render the Polygon.
i.e showPolygon ? : null
This did not work either, I even tried this with Whole Map components. i.e load Simple Component or loading Map Component with Polygon as child component.
Please see my code in the screenshot below. The State changes as expected. The Polygon component just won’t go away with a re-render.
