Get new location and radius from Circle component in React Google Maps API

user_8339172 0
Viewed 206

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

reactjs google-maps javascript
1 Answers

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']))}
/>
user_83391720
Related