React で Gooble Map の表示

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

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

[Google Cloud Platform](https://cloud.google.com/) にアクセスします。
右上の「コンソール」をクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/2ba37991-b997-b842-ea5d-30b651b29e70.png">

「クイック　アクセス」 の中の 「APIとサービス」 をクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/a6970a2a-f837-6758-7b0a-4ebcff9af22e.png">

「Maps JavaScript」 を検索して、検索結果の 「Maps JavaScript API」 をクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/64d30476-fb29-bdc1-06f4-8b952770e19f.png">

「有効にする」ボタンをクリックして有効化します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/e92250c5-9618-6364-f6d7-f6cf2bf9c419.png">

Google Maps Platform を無料で試して利用開始するためのカードの確認を進めます。必要事項入力して「続行」をクリックします。
毎月$200分のクレジットが無料で付与されますので、[地図の読み込みは1か月あたり28,500回まで無料](https://mapsplatform.google.com/intl/ja/pricing/)となります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/4debb092-5cce-f6ad-f244-4e0975eb43a5.png">

必要事項を入力して 「無料トライアルを開始」 をクリックします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/47372a1d-f253-f2b7-6f39-1b4acb557d02.png">

Google Maps API を記録しておきます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/32700f27-2360-9ebd-d9b4-d75fe532a572.png">

# 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
```
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/ead9b57a-cc9e-9de5-0071-6fb92e88b4c7.png">

# 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
```
マーカー「東京です！」が表示されました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/6da981dd-9883-51c3-7d3c-1716fd2aeada.png">

# 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](https://github.com/ryoyuki6/map20230611/tree/qiita20230611)


# 参考
・[Google Maps API を使ってみた](https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037)
・[@react-google-maps/api Google Mapの表示やマーカーの表示/カスタマイズを行う方法](https://utubou-tech.com/react-google-maps/)
・[React App で環境変数を追加する方法](https://qiita.com/Futo_Horio/items/51598e57a89f8758b80e)