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

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

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

実際によくあるご相談です。

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

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

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

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

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

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

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

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

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

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

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

あれば、2の方法です。

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

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

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

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

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

・InvalidKeyMapError など

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

・BillingNotEnabledMapError

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

・ApiNotActivatedMapError

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

・RefererNotAllowedMapError

キーを使ってよいサイトのURLに、今のURLが入っていない状態です。httpsへの切り替えやドメインの追加のあとによく起きます。

・OverQuotaMapError

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

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

■やりがちな失敗

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

・キーに使ってよいURLの制限をかけずに公開する

・httpsに切り替えたあと、許可するURLを直し忘れる

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

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

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

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

■来店型のお店ほど大切

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

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

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

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

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

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

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

https://coconala.com/services/748092