Google MAP Javascript API 実装時に発生したエラーの対応方法

Google MAP Javascript 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

対象のAPIが有効化されていない時に発生したエラーメッセージ。
対象のAPIを有効化し、APIキーの設定画面のウェブサイト制限、APIの制限を設定することで解決。

例えば、Wordpress Advance Custom Fieldプラグインの場合は下記のAPIが必要になる。
Places API →オートコンプリート
Geocoding API → 検索後位置情報取得
Maps Embed API →サイトにマップを埋め込むために必要

手順

対象のAPIのページを開き「有効化」ボタンを選択
→「認証情報」
→「該当のAPIキー」
→「ウェブサイトの制限」 GoogleMAPを読み込むURLを指定。
例)「https://www.example.com/*」と入力すると、https://www.example.com/ 内のすべてのページから読み込み可能になる。
→「APIの制限」 「キーを制限」にチェック。APIの中から「Maps JavaScript API」を選択
→「保存」ボタンを押して終了

エラー: Google Maps JavaScript API error: RefererNotAllowedMapError

APIキーの使用が許可れていない時に発生したエラーメッセージ。
APIキーの設定画面のウェブサイト制限、APIの制限を設定することで解決。

手順

「認証情報」
→「該当のAPIキー」
→「ウェブサイトの制限」 GoogleMAPを読み込むURLを指定。
例)「https://www.example.com/*」と入力すると、https://www.example.com/ 内のすべてのページから読み込み可能になる。
→「APIの制限」 「キーを制限」にチェック。APIの中から「Maps JavaScript API」を選択
→「保存」ボタンを押して終了

エラー: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

APIのJavascriptの同じファイルを複数読み込んでいる時に発生したエラーメッセージ。
重複して読み込んでいる「https://maps.googleapis.com/maps/api/js」を削除することで解決。

手順

ページ内のソースから「https://maps.googleapis.com/maps/api/js」を検索して不必要なものを削除。

エラー: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/

クレジットカードなどの支払情報が登録されていない時に発生したエラーメッセージ。

手順

Google Cloud Platformの「お支払い」から請求先を登録。
プロジェクトの画面のサイドバーから「お支払い」を選択。「請求先アカウントをリンク」から作成した請求先を選択して完了。

おすすめ書籍

  • このエントリーをはてなブックマークに追加