title: Reposition the center of the map when the location changes?
body: <p>Hi folks I'm using the <code>react-google-maps</code> library. I'm trying to recenter my map (zoom where the marker is) every time my location changes, but I'm getting a bit lost on how to implement the whole thing. I can see the marker being updated, but the map stays on its <code>defaultCenter</code> position.  </p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import {
    GoogleMap,
    Marker,
    withScriptjs,
    withGoogleMap
  } from 'react-google-maps';
  
  import environment from '../../config/environment';
  
  class Map extends Component {
    static propTypes = {
      defaultZoom: PropTypes.number,
      center: PropTypes.shape({
        lat: PropTypes.number,
        lng: PropTypes.number
      }),
      location: PropTypes.shape({
        lat: PropTypes.number,
        lng: PropTypes.number
      }),
      onPositionChanged: PropTypes.func
    };
  
    static defaultProps = {
      defaultZoom: 14,
      center: {
        lat: 60.1699,
        lng: 24.9384
      },
      location: {},
      onPositionChanged: () =&gt; {}
    };
  
    constructor(props) {
      super(props);
      this.mapRef = React.createRef((ref) =&gt; {
        this.mapRef = ref;
      });
    }
  
    componenDidUpdate() {
      console.log(`I'm about to update with props: ${JSON.strongify(prevProps, undefined, 2)}`);
    }
  
    onPositionChanged = (location) =&gt; {
      console.log(`This the new location onPositionChange:${JSON.stringify(location, undefined, 2)}`);
      const newLocation = new window.google.maps.LatLng(location.lat, location.lng);
      // [NOTE]: try using the panTo() from googleMaps to recenter the map ? but don't know how to call it.
  
      return (
        &lt;Marker
          position={newLocation}
        /&gt;
      );
    }
  
    render() {
      const {
        center,
        defaultZoom,
        location,
        onPositionChanged
      } = this.props;
  
      return (
  
        &lt;GoogleMap
          className="google-map"
          onClick={onPositionChanged(location)}
          defaultZoom={defaultZoom}
          defaultCenter={center}
          ref={this.mapRef}
        &gt;
  
          {/* &lt;Marker
            position={location}
          /&gt; */}
  
          { this.onPositionChanged(location) }
        &lt;/GoogleMap&gt;
      );
    }
  }
  
  const SchedulerGoogleMap = withScriptjs(withGoogleMap(Map));
  const SchedulerMap = props =&gt; (
    &lt;SchedulerGoogleMap
      googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${
        environment.GOOGLE_MAPS_API_KEY
      }&amp;v=3`}
      loadingElement={&lt;div style={{ height: '20vh' }} /&gt;}
      containerElement={&lt;div style={{ height: '100%' }} /&gt;}
      mapElement={&lt;div style={{ height: '20vh', width: '100%' }} /&gt;}
      {...props}
    /&gt;
  );
  
  
  export { Map, SchedulerMap, SchedulerGoogleMap };
  </code></pre>