title: Adding Marker to Google Maps in google-map-react
body: <p>I am using the <a href="https://github.com/istarkov/google-map-react" rel="noreferrer"><code>google-map-react</code></a> NPM package to create a Google Map and several markers.</p>
  
  <p><strong>Question:</strong> How can we add the default Google Maps markers to the map?</p>
  
  <p><a href="https://github.com/istarkov/google-map-react/issues/173" rel="noreferrer">From this Github issue</a>, it seems that we need to access the internal Google Maps API using the <a href="https://github.com/istarkov/google-map-react#ongoogleapiloaded-func" rel="noreferrer">onGoogleApiLoaded</a> function. </p>
  
  <p>Referring to <a href="https://developers.google.com/maps/documentation/javascript/examples/marker-simple" rel="noreferrer">an example from the Google Maps JS API docs</a>, we can use the following code to render the marker, but how do we define the references to <code>map</code>?</p>
  
  <pre><code>var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
  });
  </code></pre>
  
  <p><strong>Current Code:</strong></p>
  
  <pre><code>renderMarkers() {
      ...
  }
  
  render() {
      return (
          &lt;div style={{'width':800,'height':800}}&gt;
              &lt;GoogleMap
                  bootstrapURLKeys={{key: settings.googleMapApiKey}}
                  defaultZoom={13}
                  defaultCenter={{ 
                      lat: this.props.user.profile.location.coordinates[1], 
                      lng: this.props.user.profile.location.coordinates[0]
                  }}
                  onGoogleApiLoaded={({map, maps}) =&gt; this.renderMarkers()}
                  yesIWantToUseGoogleMapApiInternals
              &gt;
              &lt;/GoogleMap&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>