title: How to add marker on map by Click using react-google-maps?
body: <p>I'm struggling to find a very simple example of how to add a marker(s) to a Google Map when a user left clicks on the map using React-google-maps in components based. Need help.</p>
  
  <pre><code>const Map = withScriptjs(withGoogleMap((props) =&gt;
    &lt;GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: -34.397, lng: 150.644 }}
      onClick = {props.onMapClick}
     &gt;
    {props.isMarkerShown &amp;&amp; &lt;Marker position={props.markerPosition} /&gt;}
  
   &lt;/GoogleMap&gt;
  ))
  
  export default class MapContainer extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
  
     }
   }
  
  render () {
    return (
    &lt;div style={{height: '100%'}}&gt;
      &lt;Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&amp;v=3.exp&amp;libraries=geometry,drawing,places"
        loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
        containerElement={&lt;div style={{ height: `400px` }} /&gt;}
        mapElement={&lt;div style={{ height: `100%` }} /&gt;}
        placeMarker={this.placeMarker}
      /&gt;
    &lt;/div&gt;
  )
   }
   }
  </code></pre>