google-map-reactから@react-google-maps/apiに乗り換え

もともと google-map-react を使っていたのを @react-google-maps/api に変更。

google-map-react はダウンロード数が多く、当初必要だった要件を満たしそうだったので導入したものの、デフォルトのマーカーへの変更を考えたときに、

new maps.Marker({
  position: { lat, lng }
  map,
})

のようにライブラリを直接呼び出す必要があり、Reactっぽくなく使いにくかった。 クリックイベントも取得しにくいので、他ライブラリを調査することに。

google-maps-react というそっくりな名前のパッケージもあったが、あまりメンテされてなさそうなので不採用。

結局こちらを使うことに。

www.npmjs.com

<GoogleMap
mapContainerStyle={{
  width: '100%',
  height: '100%',
}}
onIdle={onMapMoved}
onLoad={onLoaded}
>
{courtDocs.map((courtDoc) => {
  return (
    <Marker
      key={id}
      position={{ lat, lng }}
      onClick={() => onClickMarker(id)}
    />
  )
})}
</GoogleMap>

これなら Marker をReact Componentとして扱える。

吹き出しは InfoWindow のコンポーネントを使う。 これも Marker と同じように GoogleMap の子として追加すればよい。 吹き出しは✗で消せるので、消えたときに InfoWindow も取り除かないと再表示がうまくいかなかった。