Adding Marker To Google Maps In Google-map-react

Answer :

Edit:
Since this answer was posted the docs (and likely, the API) of the GoogleMapReact element was changed to support children. Any child with lat and lng would be rendered at the corresponding location on the map, as also indicated by @Jobsamuel's answer.

The onGoogleApiLoaded callback should not be used for this purpose, as it is inferior to the declarative style and would not be re-run if changes are made to the map.

---

Original answer (outdated):

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!'   }); } 

Adding a marker on your map isn't as easy as we would like to, mostly because the confusing docs but here you have a super easy example:

const Map = props => {   return (     <GoogleMapReact      bootstrapURLKeys={{ props.key }}      defaultCenter={{lat: props.lat, lng: props.lng}}      defaultZoom={props.zoom}>         {/* This is the missing part in docs:          *          * Basically, you only need to add a Child Component that          * takes 'lat' and 'lng' Props. And that Component should          * returns a text, image, super-awesome-pin (aka, your marker).          *          */}        <Marker lat={props.lat} lng={props.lng}} />     </GoogleMapReact>   ) }  const Marker = props => {   return <div className="SuperAwesomePin"></div> } 

import React from 'react'; import GoogleMapReact from 'google-map-react';  const GoogleMaps = ({ latitude, longitude }) => {  const renderMarkers = (map, maps) => {   let marker = new maps.Marker({   position: { lat: latitude, lng: longitude },   map,   title: 'Hello World!'   });   return marker;  };   return (    <div style={{ height: '50vh', width: '100%' }}>     <GoogleMapReact       bootstrapURLKeys={{ key: 'YOUR KEY' }}       defaultCenter={{ lat: latitude, lng: longitude }}       defaultZoom={16}       yesIWantToUseGoogleMapApiInternals       onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}     >     </GoogleMapReact>    </div>  ); };  export default GoogleMaps;