Добавление маркера в Карты Google в Google-карте-реагировании

Я использую google-map-react пакет НПМ, чтобы создать карту Google и несколько маркеров.

Вопрос: Как мы можем добавить маркеры Google Maps по умолчанию на карту?

Из этой проблемы Github нам кажется, что нам нужно получить доступ к внутреннему API Карт Google, используя функцию onGoogleApiLoaded.

Обратившись к примеру из документов API JS API Google Maps, мы можем использовать следующий код для рендеринга маркера, но как определить ссылки на map?

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

Текущий код:

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

Ответ 1

Это может быть не совсем ясно из описания в Readme, но аргумент maps является, по сути, объектом API карт (а map - это, конечно, текущий экземпляр Google Map). Поэтому вы должны передать оба метода:

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

и использовать их:

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

Ответ 2

Добавление маркера на карту не так просто, как хотелось бы, в основном из-за запутанных документов, но здесь у вас есть простой пример:

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>
}