visgl/react-google-maps を用いて、ブラウザで Google Map を表示する

bun install @vis.gl/react-google-maps

import { APIProvider } from "@vis.gl/react-google-maps";
import {
  type MapCameraChangedEvent,
  Marker,
  Map as ReactGoogleMaps,
} from "@vis.gl/react-google-maps";
import { type FC, useCallback, useState } from "react";

type Props = {
  currentLocation: {
    lat: number;
    lng: number;
  };
};

export const GoogleMap: FC<Props> = ({ currentLocation }) => {
  const [currentCenter, setCurrentCenter] = useState(currentLocation);

  // 環境変数に「Google Cloud 設定」で取得したAPIキーを設定
  const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY ?? "";

  const handleCenterChanged = useCallback((event: MapCameraChangedEvent) => {
    setCurrentCenter(event.detail.center);
  }, []);

  return (
    {/* 記事のわかりやすさ的にコンポーネント内にProviderを記述しましたが、自身のコードの適切な場所にProviderは記述してください */}
    <APIProvider apiKey={GOOGLE_MAPS_API_KEY}>
      <ReactGoogleMaps
        style={{ width: "100%", height: "300px" }} // 地図のサイズ
        defaultCenter={currentLocation} // 一番最初の中心座標
        center={currentCenter} // 中心座標。currentCenterが変われば中心座標も変わる
        defaultZoom={15} // 設定しないと世界地図が表示されちゃうので、近場が表示されるサイズに設定
        colorScheme="DARK" // ダークモードで表示
        reuseMaps // これをtrueにすると、地図がキャッシュされる
        disableDefaultUI // 無駄なUIを非表示
        onCenterChanged={handleCenterChanged} // ユーザー操作で中心座標が変わるようにする
      >
        {/* マーカーを表示 */}
        <Marker position={currentLocation} clickable={false} />
      </ReactGoogleMaps>
    </APIProvider>
  );
};

import { useEffect, useState } from "react";

type UseGeolocation = {
  currentLocation: {
    lat: number;
    lng: number;
  };
  isNotSupportedGeolocation: boolean;
  isNotHasPermission: boolean;
};

export const useGeolocation = (): UseGeolocation => {
  const [currentLocation, setCurrentLocation] = useState({
    lat: 35.681236,
    lng: 139.767125,
  }); // 初期座標: 東京
  const [isNotSupportedGeolocation, setIsNotSupportedGeolocation] =
    useState(false);
  const [isNotHasPermission, setIsNotHasPermission] = useState(false);

  useEffect(() => {
    if (!navigator.geolocation) {
      setIsNotSupportedGeolocation(true);
      return;
    }

    let lastUpdateTime = 0; // 最後に更新された時間を記録

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        const currentTime = Date.now();
        if (currentTime - lastUpdateTime >= 10000) {
          // 最後の更新から10秒以上経過した場合のみ更新
          const { latitude, longitude } = position.coords;
          setCurrentLocation({ latitude, longitude });
          lastUpdateTime = currentTime;
        }
      },
      (error) => {
        console.error(error);
        setIsNotHasPermission(true);
      },
      {
        enableHighAccuracy: false, // 高精度な位置情報を取得しない
        timeout: Number.POSITIVE_INFINITY, // タイムアウトしない
        maximumAge: 1000 * 10, // 10秒以内の位置情報を取得
      }
    );

    return () => {
      navigator.geolocation.clearWatch(watchId); // コンポーネントのアンマウント時に監視を解除
    };
  }, []);

  return { currentLocation, isNotSupportedGeolocation, isNotHasPermission };
};