ホームページのGoogleマップが灰色になった・表示されない｜原因の見分け方と直す場所

「昨日まで出ていたアクセスの地図が、今日は灰色になっている」

ページも住所も変えていないのに、地図だけが消える。

よくあるご相談です。

地図が消える原因の多くは、地図そのものではなく「APIキー」という仕組みのまわりにあります。

しかも、原因はブラウザが名前で教えてくれるので、順番に見ていけば直す場所はすぐ絞れます。

■まず、どちらの方法で地図を出しているか

地図の出し方は、大きく2つあります。

1. Googleマップの「共有」→「地図を埋め込む」で出てきたコードを貼る方法。

この方法は自分でAPIキーを用意しません。

そのため、キーが原因で消えることはありません。

2. Googleの地図の仕組み（API）を使う方法。

地図の見た目を変えたり、ピンをいくつも立てたりしているサイトは、たいていこちらです。

APIキーという、利用するための鍵を使っています。

見分け方は、地図のあるページで右クリック→「ページのソースを表示」を開き、「maps」で探して「key=」があるかどうかです。

あれば、2の方法です。

■「for development purposes only」と出ていたら

地図が暗くなり、この英語が全体に重なって表示されていたら、原因はAPIキーまわりで確定です。

さらに詳しく知るには、そのページでキーボードのF12を押し、「Console」を開きます。

赤い文字で、原因の名前が書かれています。

■表示される名前と、直す場所

・MissingKeyMapError：キーがページに書かれていない状態です。テーマやプラグインの設定欄に、キーを入れ忘れていることがあります。

・InvalidKeyMapError など：キーがもう存在しない、または認識されていない状態です。古いキーを整理のつもりで消した、担当者が変わって作り直した、といったときに起きます。

・BillingNotEnabledMapError：Googleの請求先の登録が有効でない状態です。登録していたカードの期限切れなどで起きます。

・ApiNotActivatedMapError：キーはあるのに、地図の機能が有効になっていない状態です。

・RefererNotAllowedMapError：キーを使ってよいサイトのアドレスに、今のアドレスが入っていない状態です。サイトのSSL化やドメインの追加のあとによく起きます。

・OverQuotaMapError：無料で使える回数を超えた状態です。小さなサイトで自然に超えることはまれで、キーをほかで使われている可能性もあります。

どれも、Googleの管理画面（Google Cloud）で設定を直すことになります。

■直したあとに確かめること

設定を直しても、すぐには反映されないことがあります。

数分待ってから、ページを再読み込みしてください。

キャッシュのプラグインを使っている場合は、キャッシュも消しておきます。

それでも灰色なら、もう一度「Console」を開き、別の名前が残っていないかを見ます。

キーを使ってよいアドレスを登録するときは、「www」の付くものと付かないものの両方が含まれているかにも気をつけましょう。

どちらか片方だけだと、もう片方で開いたときに地図が出ません。

■APIキー以外で地図が出ないとき

・タブや折りたたみの中に地図を置いている：開いたときだけ灰色のままになることがあります。

・編集画面を切り替えたら、貼ったコードが消えていた：コードを貼る専用のブロックを使って貼り直します。

・最近入れたプラグインと地図の表示がぶつかっている：一時的に止めて確かめます。

■やりがちな失敗

・使っていないと思って、古いキーを消す（実はサイトが使っていた）。

・キーに使ってよいアドレスの制限をかけずに公開する。

・SSL化したあと、許可するアドレスを直し忘れる。

・請求先のカードの期限切れに気づかない。

・Googleアカウントのログイン情報が、制作会社にしか残っていない。

最後の1つは、直すときにいちばん困ります。

Googleアカウントは会社の大切な資産なので、自社で管理できる状態にしておきましょう。

■よくあるご相談の例

「何も触っていないのに、ある日から地図が灰色になった」というケースがよくあります。

この場合は、請求先に登録していたカードの期限切れや、キーの整理が原因であることが多いです。

「サイトを新しいアドレスに移したら、地図だけ出なくなった」というケースもよくあります。

こちらは、キーを使ってよいアドレスに、新しいアドレスが入っていないことが多いです。

■自分で確かめるチェックリスト

・地図の出し方が、埋め込みのコードか、APIキーを使う方法かを確かめた。

・F12の「Console」で、赤い文字の名前を控えた。

・Googleアカウントのログイン情報が、自社の手元にある。

・請求先に登録したカードの期限が切れていない。

・キーに、使ってよいアドレスの制限がかかっている。

■よくある質問

Q. 地図の埋め込みのコードに切り替えれば、キーは要らなくなりますか？

A. ピンを1つ立てるだけの地図なら、埋め込みのコードで足りることが多いです。見た目を変えている場合は、切り替えると表示が変わります。

Q. 地図のために、毎月お金がかかりますか？

A. Googleには毎月の無料の利用枠があり、小さなサイトでは収まることが多いです。ただし請求先の登録は必要で、管理画面で予算の通知を設定しておくと、思わぬ請求に早く気づけます。

Q. 見ている人の側で直す方法はありますか？

A. ありません。原因はサイトの側にあるため、サイトを管理している人が直す必要があります。

Q. 直したのに、スマホだけ灰色のままです。

A. スマホのブラウザに古い表示が残っていることがあります。時間をおいて開き直すか、別のブラウザで確かめてみてください。

■来店型のお店ほど大切

地図は、来てもらう商売にとって入口そのものです。

消えたまま何週間も気づかない、ということだけは避けたいところです。

■ご自分で直すのが難しいときは

どちらの方法で地図を出しているのか分からない、Googleの管理画面のどこを見ればよいか分からない、という方は、地図のあるページのアドレスをお知らせください。

原因を調べて直し、何をしたかをご報告します。

（Googleアカウントへの確認が必要な場合は、ご本人の承認をお願いすることがあります）

WordPressの修正・不具合を解決します

https://coconala.com/services/748092