title: How to set the center position of the map using the google-map-react library
body: <p>I have the following code in my React class which sets the center position of the map as expected.  My issue is that when my componentDidMount completes I want to reset the center position of the map using values returned from my API.  </p>
  
  <p>This is what I'm trying to achieve - </p>
  
  <ul>
  <li>Load default map center position when the page is loading (this is working)</li>
  <li>When my API returns then re-center the map using the values returned from the API (this doesn't seem to work)</li>
  <li>Create a pin on the map using the same values returned from the API (this is working)</li>
  </ul>
  
  <p>The code is included below.  I've tried lots of attempts but I can't get it working as I've detailed above.  Is there something I'm missing?  I just can't seem to re-center the map.</p>
  
  <p>Thanks,</p>
  
  <p><strong>React class</strong></p>
  
  <pre><code>class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            center: {
                lat: 100, 
                lng: 100
            }
        };
  </code></pre>
  
  <p><strong>Inside my componentDidMount function</strong></p>
  
  <pre><code>var self = this;
  
  Promise.all([callMyApi()]).then(([result]) =&gt; { 
  
      // Set map center location
      self.setState(prevState =&gt; {
          let mapCenter = Object.assign({}, prevState.center);
          mapCenter.lat = result.latitude;                 
          mapCenter.lng = result.longitude;                 
          return { mapCenter };
      });
  
  
      // Set pin location
      var pinArray = [];
      pinArray.push({
          "id": "1",
          "latitude": result.latitude,
          "longitude": result.longitude
      });
      self.setState({pins: pinArray});
  </code></pre>
  
  <p><strong>Usage of the react map</strong></p>
  
  <pre><code>const Pin = ({ profile }) =&gt; &lt;div className={"pin"}&gt;&lt;img src=".." /&gt;&lt;/div&gt;;
  
  
  &lt;GoogleMapReact
  bootstrapURLKeys={{ key: "" }}
  defaultCenter={this.state.center} &gt; 
  {this.state.pins.map(p =&gt; (
      &lt;Pin
          key={p._id}
          lat={p.latitude}
          lng={p.longitude}
          profile={p}
      /&gt;
  ))}
  </code></pre>
  
  <p><strong>Attempt #1</strong></p>
  
  <pre><code>self.setState({
        center: {
            lat: result.latitude, 
            lng: result.longitude
        }
  }); 
  </code></pre>