I’m using React Google Maps API package to create a map component with a circle component inside it. Here is the package from the npm registry https://www.npmjs.com/package/@react-google-maps/api.
I’m using Circle
component inside a Google Map
component.
I set the Circle
to be draggable and resizable.
I need to get the new value of center
for every drag action and get the new value of radius
for every resize action.
In this https://react-google-maps-api-docs.netlify.app/#circle documentation, the onCenterChanged
and onRadiusChanged
have type of void
.
So my question is how can I get the new value of center
for every drag action and get the new value of radius
for every resize action using this library?
Or is there any solution using the original google maps library?
Here is the code: https://codesandbox.io/s/circle-react-google-maps-api-lo9f6
Advertisement
Answer
After reading again the documentation and a lot of tries, I found the solution to get the new values of location and radius from the new position/size of the Circle.
I added onLoad
prop and set the circle using it.
Then I printed the circle
state value to check whether there were lat, lng, and radius values or not.
I found those values and here was the code.
const [ circle, setCircle ] = useState(null) <Circle center={mapCenter} radius={radius} options={circleOptions} onLoad={(circle) => setCircle(circle)} onUnmount={(circle) => setCircle(null)} onCenterChanged={() => circle && setCircleCenter({ lat: circle['center'].lat(), lng: circle['center'].lng() })} onRadiusChanged={() => circle && setRadius(parseInt(circle['radius']))} />