title: React with Google Maps Api, how to recenter map
body: <p>I'm using react and using the map as a functional component. (tbh I'm still unsure as to when to use classes v. functions when it comes to classes). however my main issue is that I'm using the google Maps API to present a map and I'm trying to center a map on the users current location. also, I wanted it to update as they walked around so I was just going to use a set interval function to set a timer of when it updates.
  I thought that the navigator would be my best bet. Although I can't seem to find a proper function to update the center property after initialization.</p>
  <p>I'll mark where I think the function should go.</p>
  <p>Here's the documentation I've been looking at:
  <a href="https://tomchentw.github.io/react-google-maps/#googlemap" rel="nofollow noreferrer">https://tomchentw.github.io/react-google-maps/#googlemap</a></p>
  <pre><code>function MapContainer() {
      const [currentLoc,setCurrentLoc] = useState(
          {
              lat: 42.331429,
              lng: -83.045753
          }
      )
      function setLocation() {
          if(navigator.geolocation)
          {
              navigator.geolocation.getCurrentPosition(
                  (position) =&gt; {
                      setCurrentLoc(position.coords.latitude,position.coords.longitude)
                  }
              )
          }
      }
     
      return (
      &lt;LoadScript
        googleMapsApiKey=&quot;Api key&quot;
      &gt;
        &lt;GoogleMap
          //THIS IS WHERE YOU STYLLLLLEEEE
          //also where you set what is visible with the controls
          options= {{
              styles:mapStyles['hide'],
              mapTypeControl:false,
              disableDefaultUI:true,
              draggable:true,
              zoomControl:true
          }}
          id=&quot;44b929060bf5f087&quot;
          mapContainerStyle=
          {{
              height: &quot;86.5vh&quot;,
              width: &quot;100%&quot;,
              stylers: mapStyles['hide'],
              draggable: false
          }}
          center={{
              lat: 44.331429,
              lng: -83.045753
          }}
          zoom={10}
        &gt;
          {
              setInterval((props) =&gt; {
                  var long;
                  var lati;
                  if(navigator.geolocation)
                  {
                      navigator.geolocation.getCurrentPosition(
                          (position) =&gt; {
                              lati = position.coords.latitude;
                              long = position.coords.longitude;
                          }
                      )
                  };
                  //here is where i'd set the center if i had a function i could do it with
              }, 2000)
          }
        &lt;/GoogleMap&gt;
      &lt;/LoadScript&gt;
    )
  }
   
  export default MapContainer;
  </code></pre>