Google Mapsを使用する場合は「APIキーが必須」になり、2018年7月16日よりGoogleマップはAPIキーを設定していても「Google Cloud Platform」で請求先アカウント（お支払い情報の登録も含めて）とプロジェクト(APIキー)を紐づけていないと GoogleMaps が表示しなくなりました。
APIキーが必須となった時、キーの取得以外の部分はあまりきちんと設定しなかったため一つずつ解決することに…。設定自体はそこまで難しくないのですが理解に時間が少々かかりました。（もともとの理解力が…。）
Google Mapのエラーを修正する。
エラーの内容
Google Mapで以下のようなエラーメッセージが表示されます。（実際には英語で表示）
エラーメッセージ
このページでは、Maps JavaScript APIから返されるエラーメッセージについて説明します。Maps JavaScript APIは、エラーおよび警告メッセージをJavaScriptコンソールに書き込みます。また、特定のエラー状態が発生し、ウォーターマーク付きマップが暗く表示されることがあります。APIキーと請求エラートラブルシューティング状況によっては、「開発目的のみ」というテキストで透かし入れされた暗い地図または「マイナスの」ストリートビュー画像が表示されることがあります。この動作は、通常、APIキーまたは課金の問題を示します。Google Maps Platform製品を使用するには、アカウントで請求を有効にする必要があり、すべてのリクエストに有効なAPIキーが含まれている必要があります。次のフローは、問題のトラブルシューティングに役立ちます。
- APIキーを使用していますか？
- アカウントで請求が有効になっていますか？
- 提供された請求方法は有効ではなくなりました（期限切れのクレジットカードなど）？
- APIに1日当たりの制限を超えていますか？
- APIキーにIPアドレスの制限がありますか？
今回の設定はこの中の「APIキーにIPアドレスの制限がありますか？」です。厳密にはIPアドレスでの制限方法ではなくHTTPリファラーの制限にしました。
では設定方法です。
Google Cloud Platform で設定するAPIキーのページを開きます。
APIキーの設定ページ
設定するAPIのプロジェクトを開きましょう。その中から「APIの概要に移動」をクリック。
使用しているAPIを選択「Maps JavaScript API」をクリックします。このリンク方法ではなくても左上の三本線のメニューの中から「APIとサービス」を選択しても「Maps JavaScript API」の表示があるのでそこから認証情報のページにいけます。
認証情報ページで「アプリケーションの制限」をする
APIキーが複数設定されている場合、ここにその数だけキーが表示されます。サイトに一つキーが設定されているならキーごとに認証情報が必要です。
アプリケーションの制限
キーの名前をクリックします。
下部の「キーの制限」から「アプリケーションの制限」をします。
基本的には「HTTPリファラー」を選択します。HTTPリファラーは指定したURL上のみ表示が可能と解釈しています。選択すると下部に入力枠が出てきますので、そこにマップを表示するURLを設定します。
登録はマップを表示させるページのURLを入れることになりますが、全ページ表示させたい場合大変ですし、漏れも心配です。全ページを一括で設定するときはワイルドカードを使用します。画面内にも「ワイルドカードにはアスタリスク（*）を使用します。」とあります。
ワイルドカードとは、全てのパターンにマッチする文字列のこと。今回の「*」（アスタリスク）は文字数に関係ないワイルドカードです。
例えば、「〇〇〇〇*」の場合は「〇〇〇〇」の後に何か文字列が入っていれば、すべて該当します。
設定するURLの入れ方はこちらです。
https://*〇〇〇〇.com/* と途中に設定しても大丈夫です。この場合は〇〇〇〇.comのつくサブドメインなども含まれるということのようです。
表示ページが少なければワイルドカードだけでなくページそのもののURLも登録しておくと間違いないようです。
入力が完了したら「保存」をクリックします。
APIの制限
APIの制限もしておきます。設定していないと三角のビックリマークが出ていますので表示にエラーが出ないかと心配になります。
マップ表示のみの設定なら「Maps JavaScript API」となりますが、不動産関連のサイトなどルート検索やストリートビューなど高度なAPIを使用しているのであればその全部を設定しましょう。
「アプリケーションの制限」の隣の「APIの制限」タブを押してAPIを選択します。複数選択が可能です。
これでキーの制限の設定は完了です。サイトを確認して表示がエラーに切替わらなければOKです。
「アプリケーションの制限」でIPアドレスを選択する場合
IP アドレス （ウェブサーバー、cron ジョブなど）で制限をするに設定するのは、ローカル環境で表示を確認したい時に便利です。自分のIPアドレスを確認するのはこちらでできます。
アクセス情報 あなたの使用中のIPアドレスが確認できます。→
まとめ
これで不正にAPIキーを勝手に使用されても、他のサイトで表示できなくなりました。不正使用でのアクセス数で金額請求されてしまうのは残念すぎます。設定を忘れないようにしていきたいですね。
