React で Gooble Map の表示

作成：2023年6月11日
React で Google Map を使った試作アプリを作ってみたいと思います。

1. APIキーの取得

Gooble Maps API を使用する為に、APIキーを取得します。

Google Cloud Platform にアクセスします。
右上の「コンソール」をクリックします。

「クイック　アクセス」 の中の 「APIとサービス」 をクリックします。

「Maps JavaScript」 を検索して、検索結果の 「Maps JavaScript API」 をクリックします。

「有効にする」ボタンをクリックして有効化します。

Google Maps Platform を無料で試して利用開始するためのカードの確認を進めます。必要事項入力して「続行」をクリックします。
毎月$200分のクレジットが無料で付与されますので、地図の読み込みは1か月あたり28,500回まで無料となります。

必要事項を入力して 「無料トライアルを開始」 をクリックします。

Google Maps API を記録しておきます。

2. React で Map を表示

2-1. 新規 React プロジェクト作成

次のコマンドで新規プロジェクトを作成します。

MacBook Terminal

% npx create-react-app map20230611

2-2. @react-google-maps/api をインストール

MacBook Terminal

% npm install --save @react-google-maps/api

2-3. App.js の更新

次の内容で App.js を更新します。

App.ja

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

const container = {
  width: "75%",
  height: "500px"
};

const position = {
  lat: 35.680959106959,
  lng: 139.76730676352
};

function App() {
  return (
    <>
      <h2>React & Google Map</h2>
      <div className='wrap'>
        <LoadScript googleMapsApiKey='APIキー'>
          <GoogleMap mapContainerStyle={container} center={position} zoom={15}>
          </GoogleMap>
        </LoadScript>
      </div>
    </>
  );
}

export default App;

次の内容で App.css も更新します。

App.css

.wrap {
  width: 100%;
  height: 500px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

h2 {
  text-align: center;
}

2-4. 実行

実行します。

MacBook Terminal

% npm start

3. マーカーを表示

App.js の import文に MarkerF を追加します。

App.js

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

Google Mapコンポーネント内にMakerFコンポーネントを配置します。

App.js

          <GoogleMap mapContainerStyle={container} center={position} zoom={15}>
            <MarkerF position={position} label={"東京駅です！"} />
          </GoogleMap>

実行します。

MacBook Terminal

% npm start

マーカー「東京です！」が表示されました。

4. 環境変数に Google Map API KEYを追加

API KEY を環境変数とするために、以下のファイルを更新します。

.env

REACT_APP_GOOGLE_MAP_API_KEY=APIキー

App.js

        <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAP_API_KEY}>

.envファイルを git の対象から外すために .gitignore に追加します。

.gitignore

.env

次回は、マーカーをクリックしてさまざまな処理をさせてみたいと思います。
今回のコードの置き場：qiita20230611

参考

・Google Maps API を使ってみた
・@react-google-maps/api Google Mapの表示やマーカーの表示/カスタマイズを行う方法
・React App で環境変数を追加する方法