GCP React.js

[React.js] 手っ取り早くGeocodingAPIをReactアプリに組み込む方法

今回は、React.jsのアプリにGoogleMapのGeocodingAPIを組み込む手順を紹介します。

前提

Reactアプリはnpx create-react-appで作成したものとする。  URL(https://ja.reactjs.org/docs/create-a-new-react-app.html)

GCP(GoogleCloudPlatform)でAPIキーを発行する

Mapの描画やジオコーディングを利用できるようにGoogle Developers Consoleで

  • Maps JavaScript APIGeocoding APIを有効化
  • 認証情報からAPIキーを発行
  • APIキーにMaps JavaScript APIGeocoding APIを利用できるようにする

を行っていきます。

Maps JavaScript APIとGeocoding APIを有効化

認証情報からAPIキーを発行

APIキーにMaps JavaScript APIとGeocoding APIを利用できるようにする

Reactアプリを作成

ディレクトリに入ってアプリを起動

ReactからGoogleMapAPIを利用するモジュールを組み込む

こちらの記事で紹介されているモジュールをインストールする

モジュールドキュメント(https://react-google-maps-api-docs.netlify.app/#section-getting-started)

ソースコードをいじる

.envファイルをsrcディレクトリと同じ階層に作成して、以下のように発行したGCPのAPIキーを設定する

App.jsを編集し、入力情報をジオコーディングする画面を構築する。

ジオコーディングの公式サンプルはこちらhttps://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

画面はこのような感じになっていれば完成です。

動作例:

マップを描画する部分

LoadScriptコンポーネントでラップした内部でGoogleMapコンポーネントを設置して

マップを描画しています。

マップの中心地はステートで更新されます。

検索した場合にはisShowMarkerがtrueになるためマーカーも描画されます。

ジオコーディングする部分

LoadScriptコンポーネントがDOMに組み込まれるとwindow.googleオブジェクトをグローバルから参照できるようになります。

ジオコードする関数geocodeではwindow.google.maps.Geocoder()から取得したオブジェクトから

ステートで管理している地名(locationName)で検索しています。

まとめ

  • GoogleMapのジオコーディングを試したい場合はデベロッパーコンソールからAPIキーを発行し、Geocoding APIを有効にする
  • ReactからGoogleMapAPIを利用するにはreact-google-mapsモジュールがおすすめ

リファレンス

https://developers.google.com/maps/documentation/geocoding/overview
https://github.com/googlemaps/google-maps-services-js
https://developers.google.com/maps/documentation/javascript/overview
https://react-google-maps-api-docs.netlify.app/#section-getting-started

-GCP, React.js

© 2024 Shiro's secret base