var sunCircle = {
    strokeColor: "#c3fc49",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#c3fc49",
    fillOpacity: 0.35,
    map: map,
    center: userPosition,
    radius: 1000, // in meters
    editable:true
};
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');

Now its Editable is true we can edit the circle, can i get the radius if user changes the radius?

 var sunCircle = {
    strokeColor: "#c3fc49",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#c3fc49",
    fillOpacity: 0.35,
    map: map,
    center: userPosition,
    radius: 1000, // in meters
    editable:true
};
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');

Now its Editable is true we can edit the circle, can i get the radius if user changes the radius?

• javascript
• google-maps-api-3
• overlay

2 Answers 2

google.maps.event.addListener(cityCircle, 'radius_changed', function () {
    console.log(cityCircle.getRadius());
});

You can find more info about editing events here

In React we can use ref

STEP 1: Import useRef from react library

import React, { useRef } from 'react';

STEP 2: create refCircle variable inside react ponent

let refCircle = useRef(null);

STEP 3: create handleCircleRadius inside react ponent

const handleCircleRadius = () => {
  console.log('New Radius', refCircle.getRadius());
};

STEP 4: use ref and handleCircleRadius method inside the circle ponent

<Circle
  ref={(ref) => (refCircle = ref)}
  defaultCenter={{
    lat: parseFloat(12),
    lng: parseFloat(12),
  }}
  defaultEditable={true}
  radius={parseFloat(1000)}
  center={{
    lat: parseFloat(12,
    lng: parseFloat(12),
  }}
  onRadiusChanged={handleCircleRadius}
  options={{ strokeColor: '#ff0000' }}
/>

NOTE: this circle method import from react-google-maps library

Library Link: https://www.npmjs./package/react-google-maps

OutPut