【Google Map】SPAでのページ遷移でマップを更新する

以前、google-map-reactを使ってReactプロジェクトにGoogle Map を表示することを行った

uga-box.hatenablog.com

ただ、初回レンダリング後にSPAでページをかえた場合にマップが更新されない問題が発生したので更新する方法を調べた

下のstackoverflowが参考になった
reactjs - How to use fitBounds in react-google-map once you have bounds - Stack Overflow

まず、useRefを使ってGoogleMapコンポーネントのDOM情報を取得する

const mapRef = useRef();

<GoogleMap ref={mapRef}>...</GoogleMap>

そして、useEffectでマップに表示するピン情報が更新されたら次のような処理をかく

  useEffect(() => {
    if (mapRef.current && mapRef.current.map_ && window.google) {
      const latLngBounds = new window.google.maps.LatLngBounds();
      props.pinList.forEach(item => {
        latLngBounds.extend(
          new window.google.maps.LatLng(
            item.lat,
            item.lon,
          ),
        );
      });
      mapRef.current.map_.fitBounds(latLngBounds);
    }
  }, [props.pinList]);

これでSPAでページをかえた場合でも更新することができた