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」を検索して不必要なものを削除。
補足
WordPressでAdvanced Custom FieldなどのプラグインでAPIを読み込んでいる場合は削除するのが困難。その場合、<iframe>で新しいGoogle MAPを読み込んで実装できる。
エラー： 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の「お支払い」から請求先を登録。
プロジェクトの画面のサイドバーから「お支払い」を選択。「請求先アカウントをリンク」から作成した請求先を選択して完了。
