title: Update Google Map based on Geolocation with React
body: <p>I'm trying to show Google Map with centering the map based on latitude and longitude which are returned by Geolocation. However, the map shows as the default value and not get rendered by Geolocation values. I set latitude and longitude in component state and trying to re-render the component after the state is updated. But it does not work. Below is my code.</p>
  
  <p><em>MapView.js</em></p>
  
  <pre><code>import React, { Component } from 'react'
  import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
  import MapComponent from './MapComponent'
  
  class MapView extends Component {
    constructor(props){
      super(props)
      this.state = {
        currentLatLng: {
          lat: 0,
          lng: 0
        },
        isMarkerShown: false
      }
    }
  
    componentWillUpdate(){
      this.getGeoLocation()
    }
  
    componentDidMount() {
      this.delayedShowMarker()
    }
  
    delayedShowMarker = () =&gt; {
      setTimeout(() =&gt; {
        this.getGeoLocation()
        this.setState({ isMarkerShown: true })
      }, 5000)
    }
  
    handleMarkerClick = () =&gt; {
      this.setState({ isMarkerShown: false })
      this.delayedShowMarker()
    }
  
    getGeoLocation = () =&gt; {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position =&gt; {
            this.setState({
              lat: position.coords.latitude,
              lng: position.coords.longitude
            })
          }
        )
      } else {
        error =&gt; console.log(error)
      }
    }
  
    render() {
      return (
        &lt;MapComponent
          isMarkerShown={this.state.isMarkerShown}
          onMarkerClick={this.handleMarkerClick}
          currentLocation={this.state.currentLatLng}
        /&gt;
      )
    }
  }
  
  export default MapView;
  </code></pre>
  
  <hr>
  
  <p><em>MapComponent.js</em></p>
  
  <pre><code>import React, { Component } from 'react'
  import { compose, withProps } from 'recompose'
  import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
  
  const MapComponent = compose(
    withProps({
      googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry,drawing,places",
      loadingElement: &lt;div style={{ height: `100%` }} /&gt;,
      containerElement: &lt;div style={{ height: `400px` }} /&gt;,
      mapElement: &lt;div style={{ height: `100%` }} /&gt;,
    }),
    withScriptjs,
    withGoogleMap
  )((props) =&gt;
    &lt;GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }}
    &gt;
      {props.isMarkerShown &amp;&amp; &lt;Marker position={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }} onClick={props.onMarkerClick} /&gt;}
    &lt;/GoogleMap&gt;
  )
  
  export default MapComponent
  </code></pre>