Adding Marker to Google Maps in google-map-react

Question

I am using the google-map-react NPM package to create a Google Map and several markers.

Question: How can we add the default Google Maps markers to the map?

From this Github issue, it seems that we need to access the internal Google Maps API using the onGoogleApiLoaded function.

Referring to an example from the Google Maps JS API docs, we can use the following code to render the marker, but how do we define the references to map?

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
});

Current Code:

renderMarkers() {
    ...
}

render() {
    return (
        <div style={{'width':800,'height':800}}>
            <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}) => this.renderMarkers()}
                yesIWantToUseGoogleMapApiInternals
            >
            </GoogleMap>
        </div>
    );
}

Show source
| javascript   | reactjs   | meteor   | google-maps   | google-maps-api-3   2016-12-31 05:12 1 Answers

Answers to Adding Marker to Google Maps in google-map-react ( 1 )

  1. 2016-12-31 09:12

    This may not be entirely clear from the description in the Readme, but the maps argument is, in fact, the maps API object (and map is, of course, the current Google Map instance). Therefore, you should pass both to your method:

    onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}
    

    and use them:

    renderMarkers(map, maps) {
      let marker = new maps.Marker({
        position: myLatLng,
        map,
        title: 'Hello World!'
      });
    }
    

Leave a reply to - Adding Marker to Google Maps in google-map-react

◀ Go back