Google Maps APIキーでリファラーエラーの場合の記入例【更新】

2018年6月11日、Google Maps APIはGoogle Maps Platformに移行し、2018 年7月16日に、マップ、ルート、プレイスに対して従量課金制の新しい料金プランが適用 されています。

[blogcard url=”https://web.vogue.tokyo/google-maps-api”]

Google Maps JavaScript APIの取得後のエラーについて

Google Maps APIキー・Google Maps JavaScript API を取得した後に、次のようなエラーがでる場合があります。その解決方法を記載します。

このページではGoogle mapが正しく読み込まれませんでした。JavaScriptコンソールで技術情報を確認してください

Google Maps APIキーの取得

Google Maps APIは無料で使うことができます。使用制限があり、Google Maps JavaScript APIは1 日あたり最大 25,000 回のマップロードが無料です。

Google Maps APIキーが必要

2016年6月22日以降に新しく作られるMAPについては「APIキー」が必要です。

2016 年 6 月 22 日、Google Maps API 標準プランのアップデートが実装されました。詳細は次のとおりです。

キーなしアクセス（API キーを含まないリクエスト）のサポートが終了します。今後、製品アップデートを利用できるのは、API キーを含めて行われたリクエストのみです。

APIキーなしでも表示されるMAP

2016年6月22日以前に作られたMAPは、APIキーなしでも問題なく表示されます。

2016 年 6 月 22 日より前に作成されたアクティブなドメインでは、API キーなしでも Google Maps JavaScript API、Static Maps API、Street View Image API に引き続きアクセスできます。新しいドメインでキーなしアクセスが利用できなくなる影響は受けません。

しかし、2016年6月22日より前に作成されたアクティブなドメインでも、猶予期間90日（2016年10月12日）以降、「課金を有効」にしている場合は超過分に応じて課金されます。

Google Maps JavaScript APIのマップロードの制限を超えた場合

「課金を有効」にしてない場合、「1日あたり25,000 回」を超えるとその日の終わりまでAPIが機能せず、その間、地図が表示されません。

課金を有効にして 1 日の割り当てを引き上げない限り、ウェブサイトの 1 日のマップロード回数が 25,000 回を超えると、その日の終わりまで API が機能しなくなります。

Google Maps APIキー・Google Maps JavaScript API の取得の手順

1. Google Map API にアスセスする
2. 「Google Maps JavaScript API」をクリック
3. 「キーを取得」をクリック
4. ▽select or create project プロジェクトリストからプロジェクトを選択、または新しいプロジェクトを作成を選択
   
5. ENABLE API（APIの有効化）をクリック

これで、APIを取得できました。このAPIキーをコピーし使用します。制限のないAPIキーで始めることもできますが、キーを保護して特定のwebサイトのみ使用できるように設定します。

1. API Consoleをクリック
2. 「HTTPリファラー（ウェブサイト）」を選択
3. * .example.com / *に Google Map を表示するのウェブサイトのURLを登録
4. 保存する

Google Map API の確認

1. Google API Console にアスセス
2. 作成したプロジェクトを選択
3. 右端のメニューアイコンより「API Manager」を選択
4. 認証情報

認証情報で作成したAPIキーを確認できます。

取得したGoogle Maps APIキーが機能していない時の対処法

JavaScriptコンソールを開き、Googleからのエラーメッセージを確認します。

• Chromeは、[メニュー] > [More Tools] > [Developer Tools]を選択
• Internet Explorerは、F12コンソールツールを使用
• Firefoxは、[メニュー] > [Web Developerサブメニュー] > [Webコンソール]を選択

デベロッパー エラーコード	エラーの説明
ApiNotActivatedMapError	Google Maps JavaScript API が有効になっていない
DeletedApiProjectMapError	API プロジェクトが Google API Console から削除された
ExpiredKeyMapError	API キーが期限切れ
InvalidClientIdMapError	クライアントIDの期限切れ
InvalidKeyMapError	APIキーが見つからない
InvalidKey	API キーが適切なものでない
NoApiKeys	APIキーがない

上記のエラーコードの場合は、Google API Console でAPIキーを確認し、必要ならば新しい API キーを作成します。

デベロッパー エラーコード	エラーの説明
RefererDeniedMapError	Google Maps APIs 利用規約に違反
OverQuotaMapError	利用制限を超過している
RefererNotAllowedMapError	URL が許可対象のリファラ一覧に追加されていいない

「URL が許可対象のリファラ一覧に追加されていいない」場合は、下記をご参考下さい。

参照

Chrome	Chromeのエラーコード表
Internet Explorer	Internet Explorerのエラーコード表

Google Maps JavaScript APIでリファラーエラーの場合

リファラーエラーがある場合は、Googleの形式（* .example.com / *）を使用して入力したことを確認してください。

* .example.com / *とありますが、リファラーエラーがある場合は、example.com / *で記載するとエラーが出なくなりました。開発者コンソールの変更には、更新に最大5分かかることがありますので、変更後にはしばらく時間を置いてアクセスしてみて下さい。