title: Google Maps not re-rendering in reactjs
body: <p>I am trying to show different locations of stores that exists in a database in the based on user search, but at first i need to center the map using user's current latitude and longitude. </p>
  
  <p>I did set the lat and lng to 0 in the state and updated the state values when the component is mounted. </p>
  
  <p>The problem is, the map component does not re-render when this state value is updated.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
  import { GeneConsumer } from '../../store';
  
  const mapStyles = {
    width: '100% !important',
    height: '100% !important'
  };
  
  class LocationMap extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        currentLatLng: {
          lat: 0,
          lng: 0
        },
        showingInfoWindow: false,  //Hides or the shows the infoWindow
        activeMarker: {},          //Shows the active marker upon click
        selectedPlace: {}          //Shows the infoWindow to the selected place upon a marker
      }
  
    }
  
  
    componentDidMount() {
      navigator.geolocation.getCurrentPosition(
        (position)  =&gt; {
          this.setState({
            currentLatLng: {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            }
          });
        },
        (error) =&gt; {
          this.setState({
            currentLatLng: {
                lat: 6.4494007,
                lng: 3.4498444
            }
          });
        }
      )
    }
  
    render() {
      console.log(this.state.currentLatLng.lat)
      console.log(this.state.currentLatLng.lng)
      return(
        &lt;GeneConsumer&gt;
          {value =&gt; {
                const {locations} = value;
  
                const displayMarkers = () =&gt; {
                    if(!locations){
                        return null;
                    }
                    return locations.map((location, index) =&gt; {
                      return &lt;Marker key={index} id={index} position={{
                      lat: location.latitude,
                      lng: location.longitude
                    }}
                      onClick={() =&gt; onMarkerClick(location)} 
                      name = {location.name}
                    /&gt;
                    })
                }
  
                const onMarkerClick = (props, marker, e) =&gt;
                  this.setState({
                    selectedPlace: props,
                    activeMarker: marker,
                    showingInfoWindow: true
                });
  
                const onClose = props =&gt; {
                  if (this.state.showingInfoWindow) {
                    this.setState({
                      showingInfoWindow: false,
                      activeMarker: null
                    });
                  }
                };
  
                return (
  
                    &lt;Map
                      google={this.props.google}
                      zoom={10}
                      style={mapStyles}
                      initialCenter={{ lat: this.state.currentLatLng.lat, lng: this.state.currentLatLng.lng}}
                    &gt;
                      {displayMarkers()}
                      &lt;InfoWindow
                        marker={this.state.activeMarker}
                        visible={this.state.showingInfoWindow}
                        onClose={onClose()}
                      &gt;
                      &lt;div&gt;
                        &lt;h4&gt;{this.state.selectedPlace.name}&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;/InfoWindow&gt;
                    &lt;/Map&gt;
                );
          }}
        &lt;/GeneConsumer&gt;
      );
  
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
  })(LocationMap);
  
  </code></pre>