ReactでGoogleマップの中心を取得する方法

まず、Reactプロジェクトをセットアップして、必要なパッケージをインストールします。次に、GoogleマップのJavaScript APIキーを取得し、Reactアプリケーションで使用できるようにします。

以下のコードスニペットは、Reactコンポーネント内でGoogleマップを表示し、マップの中心座標を取得する方法を示しています。

import React, { useEffect, useRef, useState } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const MapComponent = () => {
  const mapRef = useRef(null);
  const [mapCenter, setMapCenter] = useState(null);
  useEffect(() => {
    if (mapRef.current && mapRef.current.getMap) {
      const map = mapRef.current.getMap();
      if (map) {
        const center = map.getCenter();
        setMapCenter({ lat: center.lat(), lng: center.lng() });
      }
    }
  }, []);
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={{ height: '400px', width: '100%' }}
        center={{ lat: 35.6895, lng: 139.6917 }}
        zoom={12}
        onLoad={map => {
          mapRef.current = map;
        }}
      />
    </LoadScript>
  );
};
export default MapComponent;

上記のコードでは、@react-google-maps/apiパッケージを使用してGoogleマップを表示しています。LoadScriptコンポーネント内でGoogleMapコンポーネントを配置し、centerプロパティで初期の中心座標を指定します。

useRefフックを使用して、マップの参照を取得し、useEffectフックを使用してマップの読み込みが完了した後に中心座標を取得します。map.getCenter()メソッドを使用してマップの中心座標を取得し、setMapCenter関数を介して状態に保存します。

この例では、東京の座標（35.6895, 139.6917）を中心にマップが表示されますが、必要に応じて他の座標に変更できます。

以上がReactでGoogleマップの中心座標を取得するシンプルな方法です。このコードをベースにして、自分のプロジェクトに適した方法にカスタマイズしてみてください。