【解決】 Google Maps API: RefererNotAllowedMapError の解決方法と原因 | Google Maps トラブルシューティング

Google Maps API を利用中に「RefererNotAllowedMapError」というエラーに遭遇し、地図が表示されなくなってしまいお困りではないでしょうか？ ご安心ください。このエラーは非常に一般的で、ほとんどの場合、Google Cloud Console での簡単な設定変更によって迅速に解決できます。

この記事では、Windowsユーザーの皆様がこの問題を素早く解決し、将来的な再発を防ぐための具体的な手順を、結論から先にご紹介します。

1. Google Maps API: RefererNotAllowedMapError とは？（概要と緊急度）

「RefererNotAllowedMapError」は、Google Maps JavaScript API やその他のGoogle Maps Platform API を利用する際に発生するエラーの一つです。このエラーは、APIキーに設定されたHTTPリファラー（参照元URL）の制限に、現在のWebサイトのドメインが合致していないことを意味します。

簡単に言えば、「このAPIキーは、特定のWebサイトやアプリケーションからのアクセスしか許可していません。しかし、今アクセスしている場所は許可リストに含まれていませんよ」というGoogleからの警告です。

このエラーが発生すると、Webページ上のGoogleマップが正しく表示されなくなり、ユーザーエクスペリエンスに直接影響するため、緊急度は高と言えます。幸いなことに、原因が明確であるため、迅速な対応で解決可能です。

2. 【最速】今すぐ試すべき解決策

解決策1：Google Cloud Console でAPIキーのHTTPリファラー制限を一時的に緩める

最も速く地図表示を回復させる方法は、APIキーのHTTPリファラー制限を一時的に緩めることです。これにより、問題の根本原因を特定するまでの間、地図が機能するようになります。以下の手順でGoogle Cloud Consoleにアクセスし、設定を変更してください。

    1. まず、Webブラウザを開き、Google Cloud Consoleにアクセスします。WindowsのPowerShellまたはコマンドプロンプトから以下のコマンドを実行すると、すぐにログインページを開くことができます。
start https://console.cloud.google.com/apis/credentials
    1. Google Cloud Consoleにログイン後、「APIとサービス」>「認証情報」セクションに移動します。
    2. エラーが発生しているGoogle Maps Platformで使用しているAPIキーをクリックし、編集画面を開きます。
    3. 「アプリケーションの制限」セクションにある「HTTP リファラー（ウェブサイト）」の設定を確認します。
    4. 一時的な解決策として、既存の設定を削除するか、または現在の開発環境や本番環境のドメインを正確に追記します。最も広範囲に許可する一時的な方法は、テスト目的でワイルドカードを使用することです。ただし、これはセキュリティ上推奨される設定ではありませんので、あくまで一時的なデバッグ目的としてください。

例えば、あらゆるサブドメインとパスからのアクセスを許可するには、以下のように設定を追加します。（実際のドメイン名に置き換えてください）

*.your-domain.com/*
localhost:*/*
*.127.0.0.1/*

※your-domain.com はあなたのドメイン名に、localhost:*/* はローカル開発環境での動作を許可します。*.127.0.0.1/* はローカルIPアドレスからのアクセスを許可する場合に有用です。

  1. 設定変更後、「保存」をクリックします。変更が反映されるまで数分かかる場合があります。

この変更を行うことで、ほとんどの場合、すぐにGoogleマップが正常に表示されるようになります。表示が回復したら、次のセクションで恒久的な解決策とセキュリティ強化について学びましょう。

3. Google Maps API: RefererNotAllowedMapError が発生する主要な原因（複数）

このエラーが発生する背景には、主に以下の原因が考えられます。

  • ドメインの不一致: APIキーに許可されているドメインリストに、現在のWebサイトのドメイン（例: www.example.com）が正確に登録されていない。
  • サブドメインの漏れ: サブドメイン（例: dev.example.com や staging.example.com）を使用しているにもかかわらず、親ドメイン（example.com）のみが登録されている。ワイルドカード（*.example.com）の使用が不適切。
  • プロトコルの違い: WebサイトがHTTPSで提供されているのに、HTTP（http://www.example.com/*）のみがリファラーに登録されている、またはその逆。
  • ポート番号の不足/違い: ローカル開発環境などで特定のポート番号（例: localhost:3000）を使用しているが、リファラーにポート番号が明記されていない。
  • パスの不正確さ: 特定のパス（例: www.example.com/map/*）のみを許可しているが、それ以外のパスからアクセスしている。
  • ローカル開発環境の未登録: localhost や 127.0.0.1 からの開発中に、これらのローカルアドレスがリファラーに許可されていない。
  • IPアドレス制限との混同: HTTPリファラー制限とIPアドレス制限は別のものです。WebサーバーのIPアドレスをHTTPリファラーに登録しても解決しません。

4. Google Mapsで恒久的に再発を防ぐには

一時的な解決策で地図表示が回復したら、次はセキュリティを確保しつつ、恒久的にエラーの再発を防ぐための設定を行いましょう。

  1. 必要なドメインを正確に登録する:
    • 本番環境のドメイン（例: https://www.your-domain.com/*）
    • 開発環境のドメイン（例: http://localhost:3000/* や http://127.0.0.1:8080/*）
    • サブドメインを使用する場合は、*.your-domain.com/* のようにワイルドカードを適切に利用する。

    ヒント: 「*」（アスタリスク）は、その位置に任意の文字列が入ることを意味します。例えば、*.your-domain.com/* は sub.your-domain.com/any/path のようなあらゆるサブドメインとパスを許可します。

  2. 最小権限の原則に従う:セキュリティのベストプラクティスとして、APIキーがアクセスを許可するリファラーは、必要最低限に絞り込むべきです。本番環境と開発環境で異なるAPIキーを使用するか、あるいは開発用のAPIキーにはより緩い制限（例: localhost のみ）を設け、本番用のAPIキーには厳密な制限を設定することを検討してください。
  3. HTTPとHTTPSの両方を考慮する:WebサイトがHTTPとHTTPSの両方でアクセスされる可能性がある場合（開発中など）、両方のプロトコルに対応するリファラーを登録します。例: http://your-domain.com/* と https://your-domain.com/*。
  4. 定期的なレビューとクリーンアップ:プロジェクトの変更やデプロイの際に、APIキーのリファラー設定が現状と一致しているか定期的に確認しましょう。不要になったリファラーは削除し、セキュリティを維持します。
  5. エラーモニタリングの活用:Google Cloud Consoleの「APIとサービス」>「ダッシュボード」では、APIの使用状況やエラー発生率をモニタリングできます。これにより、問題が大規模になる前に早期に発見し対処することが可能になります。

これらの対策を講じることで、「RefererNotAllowedMapError」はあなたの開発プロセスから姿を消し、Google Mapsをスムーズに利用できるようになるでしょう。問題解決の一助となれば幸いです。

Related Posts