google-map-reactでGoogleマップにマーカーを追加する

Question

google-map-react NPMパッケージを使用してGoogleマップといくつかのマーカーを作成しています。

質問：デフォルトのGoogleマップマーカーをマップに追加するにはどうすればよいですか？

From this Github issueの場合、onGoogleApiLoaded機能を使用して内部Google Maps APIにアクセスする必要があるようです。

an example from the Google Maps JS API docsを参照すると、次のコードを使用してマーカーをレンダリングできますが、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> 
    ); 
} 

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

を