title: How to add coordinates to google-maps-react on a user click event?
body: <p>I'm trying to add a marker on based on a user clicking on the map for the google-maps-react npm. Currently the code below will generate markers and add them to the <code>this.state = { markers:[ ] }</code> and I would like to map them out on the map component. However, the <code>position:event.latLng,</code> will not register the lat and lng and the marker will only be created and inserted into the state with the <code>key: Date.now()</code> and <code>defaultAnimation: 2</code>. Below the code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
  
  export class MapContainer2 extends Component {
    constructor(props){
      super(props);
  
      this.state={
        lat:null,
        lng:null,
        markers:[]
      }
    }
  
    componentDidMount(){
      navigator.geolocation.getCurrentPosition(position=&gt;
        this.setState({
          lat:position.coords.latitude,
          lng:position.coords.longitude,
        }));
     }
  
     mapClicked = (event) =&gt;{
       const { markers } = this.state;
       this.setState({
         markers:[
           {
             position:event.latLng,
             key: Date.now(),
             defaultAnimation: 2,
           },
           ...markers
         ]
  
       })
     }
  
    render() {
      if (!this.props.loaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;
      }
      const style = {
      width: '100%',
      height: '100vh'
    }
      return (
        &lt;Map
         google={this.props.google}
         zoom={11}
         style={style}
         initialCenter={{
            lat: this.state.lat,
            lng: this.state.lng
         }}
         center={{
            lat: this.state.lat,
            lng: this.state.lng
         }}
         onClick={this.mapClicked}
         &gt;
         &lt;Marker
           title={'Geolocation'}
           position={{
             lat:this.state.lat,
             lng:this.state.lng,
           }}
         /&gt;
  
  
        &lt;/Map&gt;
      );
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: ('AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA')
  })(MapContainer2)
  </code></pre>