「このページではGoogleマップが正しく読み込まれませんでした」と表示されたときの対処法

以前Google Maps APIを使って作ったサイト上で、「このページではGoogleマップが正しく読み込まれませんでした。」というメッセージが出ている。
コンソールを見ると「You have exceeded your request quota for this API」というエラーが出ている。

地図自体はドラッグで動かすことはできるが薄暗くなった画面でいかにもうまく動作していないという印象になっている。

原因

上記2つのエラーが確認されたという前提であれば、原因は2つ。

1.APIキーへのアクセスが上限をこえている

わたしのサイトの場合、これはたぶんない。なぜなら確認したサイトはほとんどアクセスがないから（笑）

2.請求先情報が有効になっていない

たぶんこれ。なぜなら請求先情報を有効にした記憶がない。そもそも以前のGoogle Maps APIはもっと自由に使えたはず。（利用にAPIキーが必要になる以前の話）

対処法

請求先情報を有効にすれば、解決する。

請求先情報の有効化の手順

まずは、Google Cloud Platformにログインする。

Google Cloud Platform

設定ボタン（三）をクリックして、メニューから「お支払い」を選択。

「このプロジェクトには請求先アカウントがありません」と表示されているので、「請求先アカウントをリンク」をクリック。

Googleで一度でも何か購入したことがあるならこちらでOK。そうでない場合、あるいは別のクレジットカードを登録する場合などは「請求先アカウントを管理」をクリックする）

プロジェクト名が表示された以下のようなメッセージが表示される。
「請求先アカウントの作成」をクリック。

プロジェクトが複数ある場合は、利用するプロジェクトに切り替えてから上記の動作を再度行ってください。

Google Cloud Platformの無料トライアルという項目名で、利用規約が表示されるので、「～同意します」にチェックして「同意して続行」ボタンをクリック。（ちなみにこのページに「無料トライアル期間が終了しても、自動的に請求されることはありません」と表示されている）

お支払いプロファイルとして、現在登録されている情報等が表示されるので、一応確認して下にスクロール。

お支払いタイプと言う項目は、デフォルトで「毎月の自動支払い」となっている。最後の「無料トライアルを開始」をクリックする。

「ようこそ、〇〇さん！」と表示され再度「300ドル分がうんたらかんたら～」と説明が表示される。「OK」ボタンをクリック。

この後、Gmail宛てに以下のようなメールが到着するはず。
「プロフィールを入力する」というボタンがあるが、そのまま無視しても問題なし。

お支払い　＞　概要　をのぞいてみると、利用可能なクレジット（日本円表示）と利用可能な残り日数がで表示されている。
「この請求先アカウントにリンクされているプロジェクト」の欄にGoogle Maps APIを利用するためのプロジェクト（自分で作成したプロジェクト）が表示されていれば有効化できている。

再度Google Maps APIを使った自身のサイトにアクセスしてみると。
きちんと明るい表示に戻っている！

以上、「このページではGoogleマップが正しく読み込まれませんでした」と表示されたときの対処法でした。