React GoogleMapAPIで住所or地名から座標（緯度経度）を取得する。

はじめに

Reactで住所や地名から座標（緯度経度）を取得する方法をまとめました。
以下の方に、参考になれば幸いです。
・Reactにて住所検索してMap上に表示させたい方。
・住所をDB登録して、マーカー等を一覧で表示させたい方

導入方法

以下のページを参考に、GoogleMapのAPIキーの取得と有効化とGeocoding APIの有効化を行います。
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037

次に、ライブラリを利用する準備を行います。

ターミナル

$ npm install --save @react-google-maps/api

住所から緯度経度を取得

下記のコードで取得できる。

get.js

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

function Get() {
  const [place,setPlace] = useState();
  const [lat,setLat] = useState("");
  const [lng,setLng] = useState("");

  const changeLocationName = (event) => {
    if (event.key === 'Enter') {
      geocode();
      return;
    }
    setPlace(event.target.value)
  }

  function geocode() {
    const geocoder = new window.google.maps.Geocoder();
    geocoder.geocode({ address: place }, (results, status) => {
      if (status === 'OK') {
        setLat(results[0].geometry.location.lat()),
        setLng(results[0].geometry.location.lng());
      }
    });
  }

  return (
     <React.Fragment>
        <div>
           <input type="text" 
             onChange={(event) => changeLocationName(event)} 
             onKeyPress={(event) => changeLocationName(event)}
           />
           <LoadScript googleMapsApiKey{"取得したAPIキー"}>
           </LoadScript>
　　　　　　　　　　　　　　　　　　　　　<p>緯度：{lat}</p>
　　　　　　　　　　　　　　　　　　　　　<p>緯度：{lng}</p>

　　　　　　　　　　　　　　　　　　　{/* 実行結果
              input:福岡県
              output:緯度：33.566255900000010000
                     経度：130.715857
         */}
       </div>
     </React.Fragment>
  );
}

export default Get;

解説

まずは、ライブラリをインポートする。

get.js

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

住所か地名を入力するときに以下の場面で発火する。
onChangeはinputの値が変更されたら発火する。
onKeyPressはキーボードが押下されたら発火する。その際、どのキーが押されたかを見ている。

get.js

<input type="text" 
             onChange={(event) => changeLocationName(event)} 
             onKeyPress={(event) => changeLocationName(event)}
           />

前段のinputで入力されたものをuseStateに保管する。
入力後にENTERキーを押すと次項のgeocode()が動く。

get.js

 const changeLocationName = (event) => {
    if (event.key === 'Enter') {
      geocode();
      return;
    }
    setPlace(event.target.value)
  }

最後に、useStateに保管されている、地名や住所から緯度経度を取得。
その後、それぞれのuseStateに入れる。

get.js

  function geocode() {
    const geocoder = new window.google.maps.Geocoder();
    geocoder.geocode({ address: place }, (results, status) => {
      if (status === 'OK') {
        setLat(results[0].geometry.location.lat()),
        setLng(results[0].geometry.location.lng());
      }
    });
  }

ここで、googlemapapiで認証を受けている。
取得したAPIキーは導入方法で取得したAPIキーを入力する。

get.js

<LoadScript googleMapsApiKey{"取得したAPIキー"}>
</LoadScript>

まとめ

今回は、住所や地名から緯度経度を取得する方法をまとめました。
最後まで、読んでいただきありがとうございます。