ReactでGoogleマップの地図を表示させる方法

ReactでGoogleマップの地図を表示させる方法

ReactでGoogleマップを表示するには、「@react-google-maps/api」パッケージを使用するのが一般的です。
このパッケージはGoogle Maps JavaScript APIをラップしており、Reactアプリケーションに簡単に統合することができます。
以下は基本的な手順です。

手順

1. APIキーを取得する:
Google Cloud Platformでプロジェクトを作成し、Google Maps JavaScript APIを有効にしてAPIキーを取得します。

2. パッケージのインストール:
必要なパッケージをインストールします。

npmの場合

npm install @react-google-maps/api

yarnの場合

yarn add @react-google-maps/api

3. コンポーネントの作成:
Googleマップを表示するためのReactコンポーネントを作成します。

コード例

import React from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: 任意のwidth,
  height: 任意のheight
};

const center = {
  lat: 任意の緯度,
  lng: 任意の経度
};

const MyComponent: React.FC = () => {
  return (
    <LoadScript
      googleMapsApiKey="1で取得したAPIキー"
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        { /* 子コンポーネントをここに追加する */ }
      </GoogleMap>
    </LoadScript>
  )
}

export default MyComponent;

説明

1. LoadScript:
LoadScriptコンポーネントはGoogle Mapsのスクリプトを読み込みます。
googleMapsApiKeyプロパティに先ほど取得したAPIキーを設定します。

2. GoogleMap:
GoogleMapコンポーネントは地図を表示します。
mapContainerStyleで地図のサイズを設定し、centerプロパティで地図の中心位置を設定します。
また、zoomプロパティでズームレベルを指定します。

3. コンテナのスタイル:
containerStyleは地図のサイズを指定するためのオブジェクトです。
ここでは幅や高さを設定しています。

これで基本的な地図の表示ができます。
より詳細なカスタマイズやマーカーの追加などは、GoogleMapコンポーネントの子コンポーネントとして追加することができます。