title: React-google-maps user location
body: <p>Trying to set up a google map in my react app which centers over user location and returns address.Would anyone be so kind as to advise me how to edit the following code so that the map and marker loads over the user position. I know how to set up geolocation but can't seem to do it without breaking my existing code</p>
  
  <p>Map Component</p>
  
  <pre><code>import React, { Component } from 'react';
  import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } from "react-google-maps";
  import Geocode from "react-geocode";
  import Autocomplete from 'react-google-autocomplete';
  Geocode.setApiKey( "googleAPIkey" );
  Geocode.enableDebug();
  
  class Map extends Component{
  
      constructor( props ){
          super( props );
          this.state = {
              address: '',
              city: '',
              area: '',
              state: '',
              mapPosition: {
                  lat: this.props.center.lat,
                  lng: this.props.center.lng
              },
              markerPosition: {
                  lat: this.props.center.lat,
                  lng: this.props.center.lng
              }
          }
      }
      /**
       * Get the current address from the default map position and set those values in the state
       */
      componentDidMount() {
          Geocode.fromLatLng( this.state.mapPosition.lat , this.state.mapPosition.lng ).then(
              response =&gt; {
                  const address = response.results[0].formatted_address,
                        addressArray =  response.results[0].address_components,
                        city = this.getCity( addressArray ),
                        area = this.getArea( addressArray ),
                        state = this.getState( addressArray );
  
                  console.log( 'city', city, area, state );
  
                  this.setState( {
                      address: ( address ) ? address : '',
                      area: ( area ) ? area : '',
                      city: ( city ) ? city : '',
                      state: ( state ) ? state : '',
                  } )
              },
              error =&gt; {
                  console.error( error );
              }
          );
      };
      /**
       * Component should only update ( meaning re-render ), when the user selects the address, or drags the pin
       *
       * @param nextProps
       * @param nextState
       * @return {boolean}
       */
      shouldComponentUpdate( nextProps, nextState ){
          if (
              this.state.markerPosition.lat !== this.props.center.lat ||
              this.state.address !== nextState.address ||
              this.state.city !== nextState.city ||
              this.state.area !== nextState.area ||
              this.state.state !== nextState.state
          ) {
              return true
          } else if ( this.props.center.lat === nextProps.center.lat ){
              return false
          }
      }
      /**
       * Get the city and set the city input value to the one selected
       *
       * @param addressArray
       * @return {string}
       */
      getCity = ( addressArray ) =&gt; {
          let city = '';
          for( let i = 0; i &lt; addressArray.length; i++ ) {
              if ( addressArray[ i ].types[0] &amp;&amp; 'administrative_area_level_2' === addressArray[ i ].types[0] ) {
                  city = addressArray[ i ].long_name;
                  return city;
              }
          }
      };
      /**
       * Get the area and set the area input value to the one selected
       *
       * @param addressArray
       * @return {string}
       */
      getArea = ( addressArray ) =&gt; {
          let area = '';
          for( let i = 0; i &lt; addressArray.length; i++ ) {
              if ( addressArray[ i ].types[0]  ) {
                  for ( let j = 0; j &lt; addressArray[ i ].types.length; j++ ) {
                      if ( 'sublocality_level_1' === addressArray[ i ].types[j] || 'locality' === addressArray[ i ].types[j] ) {
                          area = addressArray[ i ].long_name;
                          return area;
                      }
                  }
              }
          }
      };
      /**
       * Get the address and set the address input value to the one selected
       *
       * @param addressArray
       * @return {string}
       */
      getState = ( addressArray ) =&gt; {
          let state = '';
          for( let i = 0; i &lt; addressArray.length; i++ ) {
              for( let i = 0; i &lt; addressArray.length; i++ ) {
                  if ( addressArray[ i ].types[0] &amp;&amp; 'administrative_area_level_1' === addressArray[ i ].types[0] ) {
                      state = addressArray[ i ].long_name;
                      return state;
                  }
              }
          }
      };
      /**
       * And function for city,state and address input
       * @param event
       */
      onChange = ( event ) =&gt; {
          this.setState({ [event.target.name]: event.target.value });
      };
      /**
       * This Event triggers when the marker window is closed
       *
       * @param event
       */
      onInfoWindowClose = ( event ) =&gt; {
  
      };
  
      /**
       * When the marker is dragged you get the lat and long using the functions available from event object.
       * Use geocode to get the address, city, area and state from the lat and lng positions.
       * And then set those values in the state.
       *
       * @param event
       */
      onMarkerDragEnd = ( event ) =&gt; {
          let newLat = event.latLng.lat(),
              newLng = event.latLng.lng();
  
          Geocode.fromLatLng( newLat , newLng ).then(
              response =&gt; {
                  const address = response.results[0].formatted_address,
                        addressArray =  response.results[0].address_components,
                        city = this.getCity( addressArray ),
                        area = this.getArea( addressArray ),
                        state = this.getState( addressArray );
                  this.setState( {
                      address: ( address ) ? address : '',
                      area: ( area ) ? area : '',
                      city: ( city ) ? city : '',
                      state: ( state ) ? state : '',
                      markerPosition: {
                          lat: newLat,
                          lng: newLng
                      },
                      mapPosition: {
                          lat: newLat,
                          lng: newLng
                      },
                  } )
              },
              error =&gt; {
                  console.error(error);
              }
          );
      };
  
      /**
       * When the user types an address in the search box
       * @param place
       */
      onPlaceSelected = ( place ) =&gt; {
          console.log( 'plc', place );
          const address = place.formatted_address,
                addressArray =  place.address_components,
                city = this.getCity( addressArray ),
                area = this.getArea( addressArray ),
                state = this.getState( addressArray ),
                latValue = place.geometry.location.lat(),
                lngValue = place.geometry.location.lng();
          // Set these values in the state.
          this.setState({
              address: ( address ) ? address : '',
              area: ( area ) ? area : '',
              city: ( city ) ? city : '',
              state: ( state ) ? state : '',
              markerPosition: {
                  lat: latValue,
                  lng: lngValue
              },
              mapPosition: {
                  lat: latValue,
                  lng: lngValue
              },
          })
      };
  
  
      render(){
          const AsyncMap = withScriptjs(
              withGoogleMap(
                  props =&gt; (
                      &lt;GoogleMap google={ this.props.google }
                                 defaultZoom={ this.props.zoom }
                                 defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
                      &gt;
                          {/* InfoWindow on top of marker */}
                          &lt;InfoWindow
                              onClose={this.onInfoWindowClose}
                              position={{ lat: ( this.state.markerPosition.lat + 0.0018 ), lng: this.state.markerPosition.lng }}
                          &gt;
                              &lt;div&gt;
                                  &lt;span style={{ padding: 0, margin: 0 }}&gt;{ this.state.address }&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/InfoWindow&gt;
                          {/*Marker*/}
                          &lt;Marker google={this.props.google}
                                  name={'Dolores park'}
                                  draggable={true}
                                  onDragEnd={ this.onMarkerDragEnd }
                                  position={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
                          /&gt;
                          &lt;Marker /&gt;
                          {/* For Auto complete Search Box */}
  
                      &lt;/GoogleMap&gt;
                  )
              )
          );
          let map;
          if( this.props.center.lat !== undefined ) {
              map = &lt;div&gt;
                  &lt;div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor=""&gt;City&lt;/label&gt;
                          &lt;input type="text" name="city" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.city }/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor=""&gt;Area&lt;/label&gt;
                          &lt;input type="text" name="area" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.area }/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor=""&gt;State&lt;/label&gt;
                          &lt;input type="text" name="state" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.state }/&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label htmlFor=""&gt;Address&lt;/label&gt;
                          &lt;input type="text" name="address" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.address }/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;AsyncMap
                      googleMapURL="https://maps.googleapis.com/maps/api/js?key=googleAPIke"
                      loadingElement={
                          &lt;div style={{ height: `100%` }} /&gt;
                      }
                      containerElement={
                          &lt;div style={{ height: this.props.height }} /&gt;
                      }
                      mapElement={
                          &lt;div style={{ height: `100%` }} /&gt;
                      }
                  /&gt;
              &lt;/div&gt;
          } else {
              map = &lt;div style={{height: this.props.height}} /&gt;
          }
          return( map )
      }
  }
  export default Map
  </code></pre>
  
  <p>index.js page</p>
  
  <pre><code>import React, { Component } from 'react';
  import Map from '../components/Map';
  
  class Index extends Component {
  
      render() {
          return(
              &lt;div style={{ margin: '100px' }}&gt;
                  &lt;Map
                      google={this.props.google}
                      center={{lat: 18.5204, lng: 73.8567}}
                      height='300px'
                      zoom={15}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Index;```
  </code></pre>