React初心者が最も使いやすいGoogleMapsAPIのライブラリはこれだ！

# この記事を書いた経緯
私はReactとFirebaseを用いたwebアプリの開発を行っている初学者です。
その中でGoogleMapsAPIを使用したくて、いろいろ自分で調べてAPIを実装したんですが、
まじで使い勝手悪いライブラリを実装してしまいました:innocent:

再度構築し直して、「これよこれ！」となったライブラリを紹介します。

## 結論からいうと``@react-google-maps/api``を使え
これが個人的に一番簡単かつ一番まともなライブラリです。
1. ライブラリをインストールする
1. GoogleMapsAPIのAPIkeyを取得する
1. ライブラリをインポートする
1. ``<LoadScript>``コンポーネントを挿入する
1. ``<GoogleMap>``コンポーネントを挿入する
1. ``onClick``イベントでマーカーをつける処理を書く

これでページにGoogleMapを表示させ、クリックした場所にマーカーをつけることができます。
さらにこのライブラリを使うと、何も設定していなくても、航空写真・全画面表示・ストリートビューの切り替え、周辺施設の情報ラベルの表示ができます。

次項から順を追って（追う必要ないと思いますが）説明していきます。

## 1. ライブラリをインストールする
コマンドプロンプトに

```
npm i @react-google-maps/api
```
と入力してライブラリをインストールします。

## 2. GoogleMapsAPIのAPIkeyを取得する。
``GoogleMapsAPI``でググったらAPIkey取得のページが出てきます。
ちゃんと``認証情報``で``キーの制限``はしてね！


## 3. ライブラリをインポートする
Googlemapを表示させたいjsxファイルに
```Googlemap.jsx:
import {
    GoogleMap,
    LoadScript,
    Marker
} from "@react-google-maps/api";
```
と入れます。

## 4. ``<LoadScript>``コンポーネントを挿入する
ライブラリをインポートしたファイルに``<LoadScript>``コンポーネントを挿入し、イベント処理に自分のAPIkeyを入れます。
```Googlemap.jsx:
export const Googlemap=()=>{
return(<>
<LoadScript googleMapsApiKey="API Key">
</LoadScript>
</>
)
}
```
APIkeyを別ファイル(.envなど）に格納してインポートすれば安全性も高まります。

## 5. ``<GoogleMap>``コンポーネントを挿入する
上記のコンポーネントの中に``<GoogleMap>``コンポーネントを挿入します。
ここで``center`` ``zoom`` ``mapContainerStyle``　のイベント処理を行わないと地図が表示されませんので
変数を使って指定していきます。
```Googlemap.jsx:
const defaultLatLng={
    lat:35.658584
    lng:139.745433

    //地図の真ん中に表示させたい場所の緯度、経度を連数配列にします。
    //ここでは東京タワーの座標を使用しています。
}

const containerStyle={
    width: "100%",
    height: "400px"

    //地図の幅と高さを連想配列にします。
    //ちなみにこのライブラリの地図はmapContainerStyleイベントでしか
    //サイズ変更できません(多分)
};


export const Googlemap=()=>{
    return(<>
        <LoadScript googleMapsApiKey="API Key">
            <GoogleMap center={defaultLatLng} 
                       zoom={7}
                       //zoomでデフォルトで表示される地図の範囲を指定します。
                       mapContainerStyle={containerStyle}>
            </GoogleMap>
        </LoadScript>
    </>)
}
```
上記処理で画面にGoogleMapを表示させることができます。


## 6. ``onClick``イベントでマーカーをつける処理を書く

最後にクリックした場所にマーカーをつける処理を書きます。
``<GoogleMap>``コンポーネントに``onClick``イベントを書きます。
このイベントでGoogleMap上でクリックした場所の座標を関数に設定する処理を行います。

```Googlemap.jsx:
import {useState} from "react"
//useStateをインポートします。

const [marker, setMarker] = useState(null);
//markerという名前の変数を宣言します。

 function handleMapClick(event) {
        
            setMarker({
                lat: event.latLng.lat(),
                lng: event.latLng.lng()
           
        })
    }
//onClickイベントで緯度と経度の連想配列が設定されたmarker変数を宣言します。


```

上記の処理を行ったうえで、``GoogleMap``コンポーネントの中に``Marker``コンポーネントを挿入します。

```Googlemap.jsx:
export const Googlemap=()=>{
    return(<>
        <LoadScript googleMapsApiKey="API Key">
            <GoogleMap center={defaultLatLng} 
                       zoom={7}
                       //zoomでデフォルトで表示される地図の範囲を指定します。
                       mapContainerStyle={containerStyle}
                       onClick={handleMapClick}>
                {marker && (
                //marker変数が設定されているときにマーカーが表示されるように論理演算子を用います。
                    <Marker position={marker}
                    //positionでmarker変数で設定した座標の連想配列を宣言します。
                    />
                )}
            </GoogleMap>
        </LoadScript>
    </>)
}

```
これでGoogleMap上でクリックした箇所にマーカーをつけることができます。

## コードの全体像

```Googlemap.jsx:
import {useState} from "react"
import {
    GoogleMap,
    LoadScript,
    Marker
} from "@react-google-maps/api";

const defaultLatLng={
    lat:35.658584
    lng:139.745433
}

const containerStyle={
    width: "100%",
    height: "400px"
};

const [marker, setMarker] = useState(null);

 function handleMapClick(event) {
        
            setMarker({
                lat: event.latLng.lat(),
                lng: event.latLng.lng()
           
        })
    }

export const Googlemap=()=>{
    return(<>
        <LoadScript googleMapsApiKey="API Key">
            <GoogleMap center={defaultLatLng} 
                       zoom={7}
                       mapContainerStyle={containerStyle}
                       onClick={handleMapClick}>
                {marker && (
                    <Marker position={marker}/>
                )}
            </GoogleMap>
        </LoadScript>
    </>)
}

```

## 最後に
Qiitaでこのライブラリをつかった初心者向けの記事が見つからなかったので書いてみました。
ライブラリに頼るのはよくないという玄人の意見もありますが、よわよわエンジニアの自分にとって生JSでGoogleMapsAPIを使うのはコスパが悪く感じました、、。

初学者でとりあえずReactでGoogleMap実装したいよって方は是非``@react-google-maps/api``使ってみてください！