title: Dynamically change radius and update current position (google-map-react)
body: <p>I am using google-map-react and want to be able to dynamically change position and radius. Currently the chosen radius is stored in a database and is fetched using the getRadius() function, but I don't know how and when to call it, therefore the radius is always displayed at 1000 meters.</p>
  <p>I've tried using the setRadius method but I don't know how to access it from outside the apiIsLoaded function. Please help!</p>
  <pre><code>import React, { useRef } from 'react';
  import GoogleMapReact from 'google-map-react';
  import Marker from './MapMarker';
  import {getUserInfo} from '../firebaseConfig'
  
  class SimpleMap extends React.Component {
  
    constructor(props){
      super(props);
      this.googleMapCircle = React.createRef();
      this.state = {
        lat: &quot;&quot;,
        lng: &quot;&quot;,
        userPos: &quot;&quot;,
        radius: 1000,
      };
    }
    
    static defaultProps = {
      center: {
        lat: 59.8,
        lng: 17.63889
      },
      zoom: 11
    };
  
    componentDidMount = () =&gt; {
      if (navigator.geolocation){
      navigator.geolocation.watchPosition(this.currentCoords)
      this.getRadius();
    }
    };
  
    currentCoords = (position) =&gt; {
      const latitude = position.coords.latitude
      const longitude = position.coords.longitude
      this.setState(prevState =&gt; ({
        userPos: {...prevState.userPos,
          lat: latitude, lng: longitude
        }
      }) 
      )
    };
  
    getRadius = () =&gt; {
      getUserInfo().then((result) =&gt; {
        this.setState({
          radius: result.radius
        })  
        }); 
    };
  
    componentDidUpdate = (prevState) =&gt; {
      if (prevState.radius !== this.state.radius) {
        //This is where I want to update radius
        }
      };
  
       apiIsLoaded = (map, maps, setUserPos, setUserRadius) =&gt; {
          var circle = new maps.Circle({
          ref:this.googleMapCircle,
          strokeColor: &quot;001e57&quot;,
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: &quot;#bbd0ff&quot;,
          fillOpacity: 0.3,
          map:map,
          center: setUserPos,
          radius: setUserRadius
        });
      };
   
    render() {
      
      const setCenter = this.state.userPos;
      const setUserPos = this.state.userPos;
      const setUserRadius = this.state.radius;
  
  
      return (
  
        &lt;div style={{ height: '100%', width: '100%' }}&gt;
  
          &lt;GoogleMapReact
            bootstrapURLKeys={{ key: 'API_KEY' }}
            defaultCenter={this.props.center}
            center={setCenter}
            defaultZoom={this.props.zoom}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps}) =&gt; this.apiIsLoaded(map, maps, setUserPos, setUserRadius)}
          &gt; 
  
            &lt;Marker
              lat={setUserPos.lat}
              lng={setUserPos.lng}
              color=&quot;blue&quot;
            /&gt;
  
          &lt;/GoogleMapReact&gt;
        &lt;/div&gt;
      );
    }
  }
   
  export default SimpleMap;
  </code></pre>