ReactでGoogleMapAPIの使い方

#はじめに
ReactでGoogleマップを表示させる方法をまとめました。
Reactのライブラリである@react-google-maps/apiを利用します。
GoogleMapのAPIキーは事前に取得及び有効化をお願い致します。

#参考サイト
こちらの記事を参考にさせていただきました。
https://medium.com/@allynak/how-to-use-google-map-api-in-react-app-edb59f64ac9d
日本語でググってイマイチだった場合は、英語でググるといい記事が見つかることがよくあります。
自分はいつも、How to use "キーワード" in "言語" みたいな感じで検索します。
今回だったら How to use Google Map in Reactで検索しました。

#導入方法
まずは@react-google-maps/apiを利用できるようにターミナルで準備します。
create-react-appで作成したプロジェクトのディレクトリで、
とりあえず自分はいつも最新バージョンを調べます。

$ npm info @react-google-maps/api

結果の一部がこちら↓

@react-google-maps/api@2.1.0 | MIT | deps: 4 | versions: 98
React.js Google Maps API integration
https://react-google-maps-api-docs.netlify.app/

今現在のの最新バージョンは@react-google-maps/api@2.1.0だったのでこれをyarn addします。

$ yarn add @react-google-maps/api@2.1.0

一番下にDone in 何秒と出てきたら成功です。
これでこのプロジェクトで@react-google-maps/apiのライブラリが利用できるようになりました。

#Mapの表示
まずはライブラリから必要なものをImportします。

Map.js

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

中はアロー関数を使って書きました。

Map.js

const Map = () => {
        const mapStyles = {
        height: "100%",
        width: "100%"
    };

    const defaultCenter = {
        lat: 41.3851, lng: 2.1734
    }

    return (
        <LoadScript
            googleMapsApiKey='YOUR_API_KEY'>
            <GoogleMap
                mapContainerStyle={mapStyles}
                zoom={13}
                center={defaultCenter}
            />
        </LoadScript>
    )
}

mapStylesの中のstyleを変えれば地図の形が変わりますし、defaultCenterのlatとlng(緯度と経度)を変えれば初期表示の中心地を変えれます。
YOUR_API_KEYをご自身のGoogleMapのAPIキーに変更してください。
ここまででMapが表示されたかと思います。

#Markerの表示
次に指定した場所にピンを立ててみようと思います。
ピンもライブラリからimportが必要です。
先ほどのimportにMarkerも追加します。

Map.js

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

そしてピンを立てる場所を指定します。
今回は２箇所を配列にいれてあげます。

Map.js

const locations = [
        {
            name: "Location 1",
            location: {
                lat: 41.3954,
                lng: 2.162
            },
        },
        {
            name: "Location 2",
            location: {
                lat: 41.3917,
                lng: 2.1649
            },
        },
    ];

最後にGoogleMapの間にMarker情報入れてあげます。
map関数を使用して、上で指定したlocationsの情報を一つずつitemに入れていくイメージです。

Map.js

            <GoogleMap
                mapContainerStyle={mapStyles}
                zoom={13}
                center={defaultCenter}>
                {
                    locations.map(item => {
                        return (
                            <Marker key={item.name} position={item.location} />
                        )
                    })
                }
            </GoogleMap>

これでピンが立ったはずです。

#infoWindowの表示
最後にinfoWindowを表示させたいと思います。
またライブラリからimport
今回はInfoWindowだけでなくuseStateも使うので併せてimportします。

Map.js

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

ピンをクリックしたら表示されるようにしたいので、関数を作っておきます。

Map.js

const [selected, setSelected] = useState({});

const onSelect = item => {
        setSelected(item);
      }

クリックするとonSelectが実行され、selectedの配列にitemの情報が入ります。

Map.js

                {
                    locations.map(item => {
                        return (
                            <Marker key={item.name} position={item.location}
                                onClick={() => onSelect(item)}
                            />
                        )
                    })
                }
                {
                    selected.location &&
                    (
                        <InfoWindow
                            position={selected.location}
                            clickable={true}
                            onCloseClick={() => setSelected({})}
                        >
                            <p>{selected.name}</p>
                        </InfoWindow>
                    )
                }

こんな感じで表示されましたでしょうか？

#終わりに
GoogleMapの使い方は他にもあるかと思いますが、個人的にはライブラリを使用するのが楽かなと思いました。
もしかしたらライブラリを使用することによって制限されるものがあるかもしれませんので、発見したらまた共有させていただこうと思います。
最後まで読んでいただきありがとうございました。