[2022年版]Google Maps API がエラーで表示されない場合の確認ポイント

Google Maps API がエラーで表示されない場合の確認ポイント

Google Chromeの検証結果で「RefererNotAllowedMapError」や
「This API project is not authorized to use this API」のエラーが出て、
Google Mapsが表示されないときの確認ポイントをまとめました。

Google Maps API キーの編集

Google Cloud Platform ＞　APIとサービス ＞　認証情報
ページへ進み、以下の通りAPI キーを編集します。

アプリケーションの制限

HTTP リファラー（ウェブサイト）

ウェブサイトの制限

sample.com/*

API の制限

キーを制限

Geocoding API
Maps JavaScript API

※Geocoding APIはAPI ライブラリページから
「Geocoding API」を検索して有効にします。

Google Cloud console

console.cloud.google.com