Reactを使用してマーカーの位置に焦点を合わせる方法（react-google-mapsを使用）

1. react-google-mapsのインストール: まず、プロジェクトにreact-google-mapsをインストールします。以下のコマンドを使用して、必要なパッケージをインストールします。

npm install react-google-maps

2. マップコンポーネントの作成: 次に、マップを表示するためのコンポーネントを作成します。以下は、基本的なマップコンポーネントの例です。

import React from 'react';
import { GoogleMap, Marker } from 'react-google-maps';
const MapComponent = () => {
  const markerPosition = { lat: 37.7749, lng: -122.4194 }; // マーカーの緯度経度
  return (
    <GoogleMap
      defaultZoom={10}
// マップの初期ズームレベル
      defaultCenter={markerPosition}
// マップの初期位置
    >
      <Marker position={markerPosition} /> // マーカーを表示
    </GoogleMap>
  );
};
export default MapComponent;

3. マーカーの位置にズームする方法: マーカーの位置にズームするためには、GoogleMapコンポーネント内でrefを使用してマップインスタンスを取得し、fitBoundsメソッドを呼び出します。以下は、マーカーの位置にズームするためのコード例です。

import React, { useEffect, useRef } from 'react';
import { GoogleMap, Marker } from 'react-google-maps';
const MapComponent = () => {
  const mapRef = useRef(null); // マップインスタンスへの参照
  const markerPosition = { lat: 37.7749, lng: -122.4194 }; // マーカーの緯度経度
  useEffect(() => {
    if (mapRef.current) {
      const bounds = new window.google.maps.LatLngBounds();
      bounds.extend(markerPosition);
      mapRef.current.fitBounds(bounds);
    }
  }, [markerPosition]);
  return (
    <GoogleMap
      ref={mapRef}
// マップインスタンスへの参照を設定
      defaultZoom={10}
// マップの初期ズームレベル
      defaultCenter={markerPosition}
// マップの初期位置
    >
      <Marker position={markerPosition} /> // マーカーを表示
    </GoogleMap>
  );
};
export default MapComponent;

これで、react-google-mapsを使用してマーカーの位置に焦点を合わせることができます。マップはマーカーの位置にズームされ、マーカーが表示されます。必要に応じて、マップの初期ズームレベルや初期位置を調整してください。

以上が、Reactとreact-google-mapsを使用してマーカーの位置に焦点を合わせる方法です。これにより、ユーザーはマップ上の特定の位置に集中して表示することができます。