埋め込んだGoogleマップが表示されない原因と対処法！APIキーを設定しよう！

埋め込んだ当時は問題なく表示されたGoogleマップに、「Googleマップが正しく読み込まれませんでした」と表示されたり、エラー表示がありGoogleマップが使えないことがあります。原因は、Googleマップ側の仕様変更に伴い使えなくなっているのか、システム障害のため使えなくなっている可能性があります。

この機会にAPIキーを使わず、完全無料でiframeを使った埋め込み手段もあります。今回は、Googleマップの仕様変更に伴いGoogleマップが使えないエラー表示の対処法をメインにお伝えしていきます。APIキーを使ったGoogleマップであっても無料で使う方法がありますので、APIキーを既に発行している場合でも有益な情報が満載です。

これからGoogleマップを使ったホームページ作成を考えておられる方は、APIキーを発行して「Google Maps Platform（旧Google Cloud Platform）」を活用する方法も知ることができます。APIキー発行方法を参考にしてください。

2016年6月22日以降、新規でGoogleマップを表示する場合、APIキーの設定が必須になりました。その際、APIキーとプロジェクトを紐付けしていない場合であっても問題なくGoogleマップが表示されていたはずです。しかし、2018年7月16日以降から、請求アカウントとプロジェクトの紐付けがされていないと、Googleマップが表示されない原因になっています。

Googleマップが、埋め込みされたマップの管理を「Google Map Platform」でおこなうことを決めました。このシステムの変更に即して、利用者が対応しなければエラーを表示し使えない状態にするとGoogleのユーザーガイドで案内しています。Googleマップ表示仕様の変更以外に、Google自体に障害が発生しているケースもあります。

Googleマップのエラーの対処法としては、暫く待つ以外にありません。またAPIキーが使われているか否かわからない場合は、後ほど案内している調べ方で確認できます。これからホームページにGoogleマップを埋め込み、一括でGoogleマップ管理を予定されている方はAPIキーの発行方法を確認してください。

先にも述べた通り、現在のGoogleマップは仕様変更されていますので、無料分＄200を超える利用で、アカウントの請求先に請求が行く仕組みです。アカウントに請求先が登録されていないと表示されなくなり実質使えなくなります。使えなくなるといっても、マップが全体的にグレーになりエラー表示がされます。

埋め込みした時は表示されていても、支払いができない状態のアカウントである場合、Googleマップが見づらい（使えない）グレー表示になり、あわせてエラー表示が出てしまうので大変困ります。Googleマップの無料版といっても、現在は＄200を超えるページ表示がある場合には、超過分支払いをする必要があるので請求先の登録が必須です。

その請求先を確認するには、Google Maps Platformのメニューから「お支払い」→「請求先アカウント」→「請求先アカウントの管理」→「マイプロジェクト」のタブを表示します。

2019年5月現在、12ヶ月期間中に利用できる＄300も獲得できるために上限超過した時の請求タイミングが異なります。

プロジェクトに、請求先アカウントが登録されているかどうかの確認が上記の方法でできます。APIキー無しに利用されていた方であれば、改めてAPIキーの発行が必要になります。Googleマップにされるエラー表示の対処法がわかります。

請求先の登録がされていたとしても、引き落としのできないクレジットカードであればエラー表示がされてしまいます。この場合ももちろん、Googleマップが表示できない原因になります。対処法として、上記のGoogle Maps Platformのメニューから請求先を確認しましょう。

Google APIs からGoogle Maps Platformに変わりましたが、管理画面の表示は以前と同様です。しかし、料金体制が１日 25,000 回（1カ月30日750,000回）を超えた分が自動的に請求されるようになっています。約28,500回分表示されるまでは、＄200の無料分であることを覚えておきましょう。

Googleマップがエラーで表示されない場合、既にAPIキーを発行している場合は以下の対処法があります。APIによるGoogleマップの埋め込みを利用していない方は、先にGoogleアカウントを用意する必要があります。

こちらでは既にAPIキーがあり、今までは埋め込みしたGoogleマップが表示されているにもかかわらず、現在使えないエラー状態にある方向けの対処法です。現在はGoogle Maps Platform（旧Google Cloud Platform）で、プロジェクト管理をおこないます。

使えないGoogleマップの対処法となるため、対象のGoogleマップに使われているAPIの特定が必要です。使えないGoogleマップのAPIを見つける方法は、後ほど詳しくお伝えしていきます。

先にもお伝えした通り、＄200を超える分は別途請求が来るので注意が必要です。アカウントに有効な支払先を登録し、紐付けすることでGoogleマップが使えないエラーの対処法です。今現在、エラー表示がでて使えない場合には有効です。Google側の障害が理由の場合は暫く様子を見ます。

Google Maps Platformのメニューから請求先のアカウントの管理で、有効な支払方法が設定されているか確認します。管理画面は以前のままなので、難しいことはないでしょう。ただし、料金プランが以前とは異なっています。

以前まではAPIキーの指定がないGoogleマップでも、問題なく表示されていたでしょう。今回表示されない原因にたいして、正しくAPIキーが指定されていない事が上げられます。それらの問題の対処法として、後ほど詳しい指定方法や埋め込み方、それらを簡単にできる機能拡張などを解説していきます。

今までAPIキー指定のために使われていたGoogle Cloud Platformは、名称が変わりGoogle Maps Platformとなっています。管理画面等、以前と同じままですが以下Googleマップ管理に便利なツールとしてGoogle Maps Platformとこちらでは記載しています。

GoogleマップにAPIを指定しているか否かは、拡張機能を使うと便利です。Googleマップの埋め込みにも便利で、高性能なマップの利用が可能です。多くのGoogleマップを埋め込み利用している場合、表示されない原因の対処法として一先ずAPIを特定する必要があります。

APIは、1アカウントに複数発行できるのですが、リクエストが拒否されるトラブルに合う方もいます。Googleマップの表示がされないことはありませんが、sensorパラメーターを「false」にすることで、エラー表示を回避できます。

先にもお伝えした通り、表示されないGoogleマップのAPIが特定でき、埋め込みコードを修正しても表示されない場合があります。HTMLの確認をおこなうか、先にお伝えしていたプロジェクトに請求先のアカウントが紐付けされてる必要があります。もちろん、請求先は利用可能なクレジットカードの設定でなければなりません。

Google Cromの拡張機能である「Google Maps Platform API Checker」をインストールすると便利です。エラー表示で使えないGoogleマップにどのAPIが使われているか、特定するのに使えます。Google Maps Platform API Checkerが入っている状態であれば、アイコンをクリックするだけでAPIの指定があるかないかを表示します。

「Maps Static API」の拡張機能もAPI検出につかえます。「Google Maps Platform API Checker」と同様にアイコンをクリックするだけです。GoogleマップにAPIが指定されていない場合は、メッセージを表示してくれるので、原因を知るのにうってつけです。

どちらも、エラーで表示されないGoogleマップのページを開き、拡張機能アイコンをクリック数だけです。表示されるメッセージの中には、APIの指定が必要な事を伝えるものもあるのでその場合は、APIキーを埋め込みます。これらの拡張機能で、すぐにGoogleマップが表示されない原因がわかるのです。

Googleマップに適切に使われてない場合も表示して教えてくれるので、埋め込みの際のミスの対処法にもなりえます。scriptタグのパラメーター部分にAPIキーを追加します。「Google Maps Platform API Checker」の使い方が分かれば、Googleマップの表示されない原因がわかるほか、埋め込みのし直しでエラー表示の原因解消が可能です。

APIキーが指定されていないことを表示されているページには、JS SPI Callと書かれた下にタグが記述されています。URL以降にAIPキーを埋め込み、表示されないGoogleマップのタグと書き換えるだけです。使用している拡張機能により若干タグは異なりますが、埋め込みが完了したページでGoogleマップが表示されているか確認します。

元々Googleマップから埋め込みコードを取得して埋め込みをしていた方が、新たに高性能なGoogleマップをホームページに張り付けたい場合にもAPIキーの取得と発行は必須です。APIキーの埋め込みがされていない事が原因でGoogleマップが表示されていない場合、APIキーがあれば対処法として使えます。

こちらでは、初めて使う方にも必要なAPIキー発行方法について詳しくお伝えしていきます。初めにもお伝えした通り、Googleマップの管理をする「Google Maps Platform（旧Google Cloud Platform）」を利用するには、Googleアカウントが必要です。

既に持っているGoogleアカウントを使うことも可能です。ログインできない、あるかどうかわからない方はGoogleアカウントヘルプを参照してください。こちらにはアカウント作成方法も記載されています。

現在は、「Google Maps Platform」から簡単にAPIキーの発行ができるようになっています。GET STARTEDをクリックしたら、3種類のマップを選択できます。全てを選択することも可能です。プロジェクト名を入力しますが、他の人が使っていない名でなければならないのと漏洩してはまずい情報を盛り込むのは控えましょう。

次に請求先の設定をおこないます。「請求先アカウント名」→「日本」→「名前・住所・クレジットカード情報の入力」→「送信して課金を有効にする」をクリックします。最後に「Google Maps PlatformのAPIを有効化」→「次へ」でAPIキーが発行されます。

以前まではGoogle Maps Platform（旧Google Cloud Platform）でプロジェクトを作成してGoogleマップを利用する方が殆どでしょう。そのまま使い続けている状態だと、Googleマップの仕様変更でマップが表示されない原因となっていることがあります。

APIキーの設定がされずに、そのまま使えることもありましたが現在ではAIPの発行・設定と、有効な支払先登録が不可欠になっています。

先にそれぞれの拡張機能を使って、APIがGoogleマップに埋め込まれているか否かの解説をしていますが、そちらでお伝えした「Google Maps Platform API Checkerの使い方」に埋め込み方法をご案内しています。

こちらでは、既に埋め込まれているGoogleマップにAPIキーを埋め込む方法と、自動的にAPIキーが埋め込まれたコードが作成されるように設定することも可能です。また、先にお伝えしたAPIキーは登録したURLのページ以外での使用ができません。そのため、上記でお伝えした手順を再度繰り返してAPIキーの発行が必要な場合があります。

Google Maps Platform（旧Google Cloud Platform）の「APIの認証情報」→「発行したAPIキー右側のアイコンクリック」→「クリップボードやメモ帳にコピーしたものを貼りつける。」

Maps JavaScript APIであれば、1ページに1カ所コピーしたものを埋め込みだけで済みますが、Static・Embedの場合は、Googleマップ表示個所ごとに貼り付ける必要があります。

<script src="https://GoogleマップURL”＜元のパラメーター＞&key=＜APIキー＞"></script>コピーしたAPIキーは、必ずkey=の後に貼り付けます。

「Maps Embed API」を使えば、iframeによるGoogleマップにAPIキーを追加することができる上に、簡単にカスタマイズを加えて埋め込みできます。

Wordpressのプラグイン「TCD Google Maps」を使えば「TCDテーマオプション」→「基本設定内」→「生成したAPIキー」をクリックします。他にも、住所入力だけで表示させたり、縦横サイズやズームさせる調整機能まであり、Googleマップを表示するのにとても便利です。目で見てわかりやすいので、初心者の方におすすめです。

Google Maps Platformを使って、＄200以上の利用になる前に制限をかけてしまう方法があります。上限をかけるAIPを選択し、「割り当て」→「鉛筆マーク」→「割り当て量上限に数値を記入」→「保存」をクリックします。

入力する数値は、1日・100秒間・100秒間かつ1ユーザーの表示上限によって異なります。中には複数のAIPを設定せねばならないホームページもあるので、現在のリクエスト数を目安に決めます。2019年5月現在、自動的に超過分の請求がされないよう制限がかけられた状態でスタートになります。

AIPキーの発行をしたのちに、拡張機能で表示されるコードにAIPキーを付け加えます。これらの作業は、上記でお伝えしたプラグインを活用したり、Googleマップが表示されているページごとにGoogle Cromの拡張機能を利用するとよいでしょう。

Googleマップを使うには、発行されたコードをホームページにそのまま張り付けるだけで完了です。しかし、GoogleマップにAPIが埋め込まれているコードを利用すると、表示されるごとに1ロードカウントされ＄200分を超えるロードがあると、超過料金が請求されます。

Googleマップの無料分超過を避けるために、アカウントを複数作成する対処法をおこなう人もいますが、規約に反する行為なので避けた方が賢明でしょう。

自分のホームページ以外でAPIキーを悪用されないためにも、APIキーの利用を制限しておきます。AIPキーを使っているGoogleマップが表示されているページ以外では勝手に利用されることがないように、URLを指定できます。「APIの認証情報ページ」→「アプリケーションの制限タブ」→「HTTPリファラーを選択」をクリックします。

Googleマップが表示されるページのURLから、ドメイン名・スキーム・パスから選び、それをリファラーに入力します。次に、「APIの制限タブ」→「利用するマップ用APIを選んで追加」→「保存」を押します。この作業で、意図しない場所での無断利用を防げます。

この作業で、Googleマップが表示できない原因になりうることがあります。リファラーの設定ミスやリファラーとAPIの種類を確認し直したり、表示や動作の確認をするのがよいでしょう。Googleマップに反映されるまで時間がかかることもあるので、時間をかけておこなう作業でもあります。

上記の手順でAPIを発行したり、埋め込んだコードをホームページに設置したとしても、クレジットカード情報を登録して有効化されていなければ表示されない問題は解消されません。APIの有効化（支払い登録がされている）状態であること、有効なクレジットカードが登録されている事が条件になるのでアカウントとの紐付けを確認しましょう。

以前までGoogle Cloud Platformで管理していたGoogleマップを表示させるためには、＄200分の無料からのスタートとなります。使用しているマップによって、＄200分の上限が異なりマップ表示のあるページを見る都度1ロール分とカウントされていきます。表示回数は1ページだけのカウントではないので、マップ表示のあるページ全てを考慮して上限を設ける必要があります。

Googleマップが使えない原因は、今まで絶対必要とは言い切れなかったAPIキーの存在と支払い方法の登録が最も多いのではないでしょうか。表示されないことで、とても便利なGoogleマップが使えないのは店舗を持つショップにとっては痛手です。

ユーザーに分かりやすい場所の説明が必要な場合、この機会にAPIキーを設定して管理してみましょう。Googleマップを簡単に設置できるプラグインや拡張機能はおすすめです。