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

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

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

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

原因

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

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

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

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

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

対処法

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

ちなみに請求先情報を有効にしてもGoogleから請求されることはないので安心してください。利用したAPIのアクセス数に応じて請求が発生する仕組みになったのだが、利用者が無料のまま使い続けた場合、先程のGoogleマップが薄暗くなって「このページではGoogleマップが正しく読み込まれませんでした。」というだけの話。更に現時点(2019年8月)では、請求先情報を有効にすると12か月間有効な$300分の利用枠がGoogleからプレゼントされる仕組みになっているので、自分でお金を払わずとも$300分Google Cloud Platformのサービスが利用できる。まあ、利用者を拡大させておいて将来お金を徴収しようという魂胆がみえみえだが。(失礼!)

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

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

Google Cloud Platform

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

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

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

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

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

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

「このページではGoogleマップが正しく読み込まれませんでした」と表示されたときの対処法
プロジェクトが複数ある場合は、利用するプロジェクトに切り替えてから上記の動作を再度行ってください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました