title: Getting lat/lng from google map using react-google-maps
body: <p>I have my map component</p>
  
  <pre><code>const MyMapComponent = withScriptjs(
    withGoogleMap(props =&gt; (
      &lt;GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: props.lat, lng: props.lng }}
        onClick={e =&gt; console.log(e)}
      &gt;
        {props.isMarkerShown &amp;&amp; (
          &lt;Marker position={{ lat: props.lat, lng: props.lng }} /&gt;
        )}
        &lt;MarkerClusterer averageCenter enableRetinaIcons gridSize={60}&gt;
          {props.markers.map(marker =&gt; (
            &lt;CustomMarker
              key={marker.id}
              marker={marker}
  
            /&gt;
          ))}
        &lt;/MarkerClusterer&gt;
      &lt;/GoogleMap&gt;
    ))
  );
  export default MyMapComponent;
  </code></pre>
  
  <p>And I have my app component that return this code</p>
  
  <pre><code>  return (
        &lt;div className="container"&gt;
          &lt;div className="map"&gt;
  // myMapComponent imported as Map
            &lt;Map
              onMapClick={this.onMapClick}
  
              googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=YOUR_API_KEY"
              loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
              containerElement={&lt;div style={{ height: `95vh` }} /&gt;}
              mapElement={&lt;div style={{ height: `100%` }} /&gt;}
              lat={this.state.lat}
              lng={this.state.lng}
              markers={filteredResturants}
  
            /&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      );
  </code></pre>
  
  <p>I want have lat/lng when a user clicks on map. The most straightforward way I found in every answer is to have onClick event and in e you get e.latLng object. But I have been getting empty latLng object. I have tried putting onClick event on myMapComponent as well as on Map component. 
  This is what I get.</p>
  
  <pre><code>.Jm {latLng: _.N, ya: MouseEvent, pixel: _.K, qa: _.K}latLng: _.N {lat: ƒ, lng: ƒ}ya: MouseEvent {isTrusted: false, screenX: 91, screenY: 262, clientX: 91, clientY: 262, …}pixel: _.K {x: 75, y: 246}qa: _.K {x: 128.92420605694446, y: 88.34013104858127}__proto__: Object
  </code></pre>
  
  <pre><code>latLng: _.N
  lat: ƒ ()
  lng: ƒ ()
  </code></pre>