GoogleMapGeocodingAPIをReactで使用する

やりたいこと

GoogleMapをアプリで使用する際に、場所の検索ができると思いますが、その機能をAPIでも実現したいです。
GoogleMapにはGeocodingAPIが用意されていて、場所の名前から緯度・経度を返してくれます。これをReactで使用するときのサンプルを紹介します。

前提等

• GeocodingAPIを、有効化していることを前提としてます。有効化の手順はGoogle Geolocation APIキーを取得する方法を参照してください。
• 地図用のライブラリとして、google-maps-reactを使います。
• ライブラリの使い方やReactの実装方式やstateの管理は、【React】GoogleMapで地図をドラッグして移動した後にMarkerを更新すると同様とします。
• Geocodingの実装についてはAdding multiple markers to react google maps while using geocoderを参考にしています。

サンプル

GoogleMapComponent.js

import React, { useContext } from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";
import { MapStore } from "../../store/MapStore";

export const GoogleMapComponent = ({ google }) => {
  const { state, dispatch } = useContext(MapStore);
  const location = state.currentLocation;
  const [place, setPlace] = useState("");
  function handleChangePlace(e) {
    setPlace(e.target.value);
  }
  // 地名での検索
  function handleSearch() {
    if (place !== "") {
      const geocoder = new google.maps.Geocoder();
      // Geocodingの呼び出し
      geocoder.geocode(
        {
          address: place,
          region: "jp",
        },
        function (results, status) {
          if (status === "OK") {
            const geometryLoc = results[0].geometry.location;
            dispatch({
              type: "CHANGE_LOCATION",
              currentLocation: {
                latitude: geometryLoc.lat(),
                longitude: geometryLoc.lng(),
              },
            });
          }
        }
      );
    }
  }
  return (
    <input
      type="text"
      name="place"
      value={place}
      onChange={handleChangePlace}
    />
    <input type="button" value="検索する" onClick={handleSearch} />
    <Map
      google={google}
      zoom={15}
      center={{ lat: location.latitude, lng: location.longitude }}
      initialCenter={{ lat: location.latitude, lng: location.longitude }}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
})(GoogleMapComponent);