title: How to get the latitude and longitude of a place react google maps?
body: <p>I have two inputs to get the latitude and longitude from the user. when user enter the longitude and latitude the place is shown in the map . Now what i want to do is. i want to show the longitude and latitude inside the input, when user clicks on a place in the map. when user clicks on the map the marker should also appear in the place that user selected.</p>
  
  <p>map component</p>
  
  <pre><code>import React, { Component } from "react";
  import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
  
  class MapContainer extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
  
      };
    }
  
    render() {
      const style = {
        width: '22%',
        height: '40%'
      }
      return (
        &lt;Map
          style={style}
          google={this.props.google}
          zoom={this.state.zoom}
          center={{
            lat: this.props.latitudeForMap,
            lng: this.props.longitudeForMap 
          }}
        &gt;
  
          &lt;Marker
          position={{lat: this.props.latitudeForMap, lng: this.props.longitudeForMap}}
           /&gt;
  
  
  
  
        &lt;/Map&gt;
  
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: ("api key")
  })(MapContainer)
  </code></pre>
  
  <p>the component which have the inputs</p>
  
  <pre><code>             &lt;Form.Item {...formItemLayout} label="Latitude"&gt;
                          {getFieldDecorator('latitude', {
                              rules: [
                                  {
                                      required: true,
                                      message: 'Please input the Latitude!',
                                  },
                                  {
                                      pattern: '^[.0-9]+$',
                                      message: 'This input is not valid!',
                                  }
                              ],
                          })(
                              &lt;Input
                                  placeholder="Enter the latitude"
                                  name="latitude"
                                  onBlur={(element =&gt; { this.setState({ latitude: element.target.value }) })}
  
                              /&gt;
                          )
  
                          }
  
                      &lt;/Form.Item&gt;
  
                      &lt;Form.Item {...formItemLayout} label="Longitude"&gt;
                          {getFieldDecorator('longitude', {
                              rules: [
                                  {
                                      required: true,
                                      message: 'Please input the Longitude!',
                                  },
                                  {
                                      pattern: '^[.0-9]+$',
                                      message: 'This input is not valid!',
                                  }
                              ],
                          })(
                              &lt;Input
                                  placeholder="Enter the Longitude"
                                  name="longitude"
                                  onBlur={(element =&gt; { this.setState({ longitude: element.target.value }) })}
  
                              /&gt;
                          )
  
                          }
  
                      &lt;/Form.Item&gt;
  
  &lt;MapContainer
      longitudeForMap={(this.state.longitude !== '') ? this.state.longitude : -73.935242}
      latitudeForMap={(this.state.latitude !== '') ? this.state.latitude :40.730610 }
  /&gt;
  </code></pre>