この記事を書いた経緯
私はReactとFirebaseを用いたwebアプリの開発を行っている初学者です。
その中でGoogleMapsAPIを使用したくて、いろいろ自分で調べてAPIを実装したんですが、
まじで使い勝手悪いライブラリを実装してしまいました
再度構築し直して、「これよこれ！」となったライブラリを紹介します。
結論からいうと@react-google-maps/apiを使え
これが個人的に一番簡単かつ一番まともなライブラリです。
- ライブラリをインストールする
- GoogleMapsAPIのAPIkeyを取得する
- ライブラリをインポートする
-
<LoadScript>コンポーネントを挿入する -
<GoogleMap>コンポーネントを挿入する -
onClickイベントでマーカーをつける処理を書く
これでページにGoogleMapを表示させ、クリックした場所にマーカーをつけることができます。
さらにこのライブラリを使うと、何も設定していなくても、航空写真・全画面表示・ストリートビューの切り替え、周辺施設の情報ラベルの表示ができます。
次項から順を追って（追う必要ないと思いますが）説明していきます。
1. ライブラリをインストールする
コマンドプロンプトに
npm i @react-google-maps/api
と入力してライブラリをインストールします。
2. GoogleMapsAPIのAPIkeyを取得する。
GoogleMapsAPIでググったらAPIkey取得のページが出てきます。
ちゃんと認証情報でキーの制限はしてね！
3. ライブラリをインポートする
Googlemapを表示させたいjsxファイルに
import {
GoogleMap,
LoadScript,
Marker
} from "@react-google-maps/api";
と入れます。
4. <LoadScript>コンポーネントを挿入する
ライブラリをインポートしたファイルに<LoadScript>コンポーネントを挿入し、イベント処理に自分のAPIkeyを入れます。
export const Googlemap=()=>{
return(<>
<LoadScript googleMapsApiKey="API Key">
</LoadScript>
</>
)
}
APIkeyを別ファイル(.envなど）に格納してインポートすれば安全性も高まります。
5. <GoogleMap>コンポーネントを挿入する
上記のコンポーネントの中に<GoogleMap>コンポーネントを挿入します。
ここでcenter zoom mapContainerStyle のイベント処理を行わないと地図が表示されませんので
変数を使って指定していきます。
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上でクリックした場所の座標を関数に設定する処理を行います。
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コンポーネントを挿入します。
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上でクリックした箇所にマーカーをつけることができます。
コードの全体像
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使ってみてください！