【GoogleMapsApi】Geocondingエラー「This API project is not authorized to use this API」の解消法

エラー内容

GoogleMapsApiを使って、ウエブサービスにGoogleMapを取得しています。
その際、地名検索をGeocoding Apiを用いて実装してみることにしましたが、下記エラーが発生。

Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

コード概要

GoogleMap.tsx

import React, { FC, useState } from "react";
import styles from "./GoogleMap.module.scss";
import GoogleMapReact from "google-map-react";

const GoogleMap: FC = () => {
  const [map, setMap] = useState(null);
  const [maps, setMaps] = useState(null);
  const [geocoder, setGeocoder] = useState(null);
  const [address, setAddress] = useState(null);
  const [marker, setMarker] = useState(null);
  const GoogleApiKey: any = process.env.REACT_APP_GOOGLE_MAP_API_KEY;

  const defaultLatLng = {
    lat: 35.7022589,
    lng: 139.7744733,
  };

  // map, maps で受け取ると変数が被るので object で受け取っています
  const handleApiLoaded = (object: any) => {
    setMap(object.map);
    setMaps(object.maps);
    setGeocoder(new object.maps.Geocoder());
  };

  const search = () => {
    geocoder.geocode(
      {
        address,
      },
      (results, status) => {
        if (status === maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          if (marker) {
            marker.setMap(null);
          }
          setMarker(
            new maps.Marker({
              map,
              position: results[0].geometry.location,
            })
          );
          console.log(results[0].geometry.location.lat());
          console.log(results[0].geometry.location.lng());
        }
      }
    );
  };

  return (
    <div className={styles.root}>
      <div className={styles.input_form}>
        <input type="text" onChange={(e) => setAddress(e.target.value)} />
        <button type="button" onClick={search}>
          Search
        </button>
      </div>
      <div className={styles.google_map_react}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: GoogleApiKey }}
          defaultCenter={defaultLatLng}
          defaultZoom={8}
          onGoogleApiLoaded={handleApiLoaded}
          yesIWantToUseGoogleMapApiInternals={true}
        />
      </div>
    </div>
  );
};

export default GoogleMap;

エラー文を検索して、問題解決に繋がりそうな記事を探すこと５〜６時間…こちらの記事にて問題解決に至りました。

問題となっていた箇所は、「認証情報」画面で行う「キーの制限」-「APIの制限」の設定でした。

ここに「Geocoding API」を追加でエラー解消です。

まとめ

解決してみれば「なんでこんな簡単なことで。。。」とほっとするような、自分に呆れるような。

まぁ、エラーのおかげである意味その周辺の知識が深まるので良しとします。

それでは引続き、開発を頑張っていきます。