Adding Marker to Google Maps in google-map-react : <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>
