title: create google map with users location with react
body: <p>I'm new to React and currently trying to learn how to use <code>react-google-maps</code> library. Tried to show a map with users geolocation as the <code>initialCenter</code> of the map.</p>
  
  <p>This is my code:</p>
  
  <pre><code>import React from "react";
  import { GoogleApiWrapper, Map } from "google-maps-react";
  
  export class MapContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = { userLocation: { lat: 32, lng: 32 } };
    }
    componentWillMount(props) {
      this.setState({
        userLocation: navigator.geolocation.getCurrentPosition(
          this.renderPosition
        )
      });
    }
    renderPosition(position) {
      return { lat: position.coords.latitude, lng: position.coords.longitude };
    }
    render() {
      return (
        &lt;Map
          google={this.props.google}
          initialCenter={this.state.userLocation}
          zoom={10}
        /&gt;
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: "-----------"
  })(MapContainer);
  </code></pre>
  
  <p>Insted of creating a map with users location I get an <code>initialCenter</code> of my default state values.</p>
  
  <p>How can I fix it? Am I even using the lifecycle function right?</p>
  
  <p>Thank you very much for your help</p>