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

今まで埋め込んで表示されていたGoogleマップが表示されないのには、多くの原因があります。Googleマップの新システム変更APIキーがあるにもかかわらず、表示されないなどのトラブルの対処法とAPI設定方法をお伝えしていきます。

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

目次

  1. 1埋め込みしたGoogleマップが表示正しく表示されない原因
  2. Googleマップ表示仕様の変更
  3. 月の利用制限数を超過している
  4. APIキーと請求先アカウントが紐付けされていない
  5. 2Googleマップが表示されない時のAPIによる対処法
  6. APIキーを設定する
  7. APIキーの指定
  8. 3表示されないGoogleマップに使われているAPIを特定する
  9. Google Chromeと拡張機能を利用する
  10. 4Googleマップが表示されない時APIキー発行するには
  11. APIキー発行手順
  12. 5表示されないGoogleマップにAPIキーを埋め込むには
  13. APIキーの埋め込み方
  14. 自動でAPIキーが埋め込まれるようにする
  15. 無料内で済むように制限をかける
  16. 6APIを埋め込んだGoogleマップを使うには
  17. APIキーの利用を制限する
  18. Geocoding APIを有効にする
  19. 7Googleマップが表示されない時はAPIキーを設定しよう

埋め込みしたGoogleマップが表示正しく表示されない原因

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

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

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

Googleマップ表示仕様の変更

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を超える利用で、アカウントの請求先に請求が行く仕組みです。アカウントに請求先が登録されていないと表示されなくなり実質使えなくなります。使えなくなるといっても、マップが全体的にグレーになりエラー表示がされます。

41685268 265254687435202 6108775195685480425 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
gatagatagogo

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

58454114 134739344285637 5591008485321750588 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
miya380

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

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

APIキーと請求先アカウントが紐付けされていない

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

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

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

ThumbGoogle XML Sitemapsの使い方!サイトマップ作成・設定する方法を解説!
WordPressのプラグインであるGoogle XML Sitemapsの使い方を紹介して...

Googleマップが表示されない時のAPIによる対処法

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

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

41394898 1018525734975418 7493747054162739200 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
fandycloapedia

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

APIキーを設定する

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

57044387 128606144905789 5866583087219049789 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
mynameissymi

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

APIキーの指定

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

33198199 176607776512149 9174971444805763072 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
l1naballer1na

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

ThumbGoogleマイマップの作り方!自分だけの地図を作る使い方や共有方法は?
Googleマイマップを活用すれば、自分にとって分かりやすいオリジナルの地図を作ることができ...

表示されないGoogleマップに使われているAPIを特定する

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

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

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

Google Chromeと拡張機能を利用する

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

59361977 2379186115649306 3252276493085693323 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
easysoftwaredeveloper

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

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

Google Maps Platform API Checkerの使い方

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

Google Maps Platform API Checker

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

ThumbGoogleマップの使い方!地図の見方やナビでの設定など機能を紹介!
Googleマップの使い方を紹介します。Googleマップのナビ機能を利用すれば、ドライブや...

Googleマップが表示されない時APIキー発行するには

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

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

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

APIキー発行手順

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

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

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

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

ThumbGoogleマップの地図を航空写真に切り替える方法!衛星写真を表示するには?
地図を持ち運ぶことなくスマホやPCさえあれば自分の居場所や行先までの道のりがわかるGoogl...

表示されないGoogleマップにAPIキーを埋め込むには

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

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

APIキーの埋め込み方

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

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

58701421 123773265480381 8605143539395824061 n.jpg? nc ht=instagram.fkix2 1.fna.fbcdn
aquamarpraiahotel

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

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

自動でAPIキーが埋め込まれるようにする

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

無料内で済むように制限をかける

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

Googleマップ管理ツール登録画面

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

ThumbGoogleマップのストリートビューとは?使い方や地図写真の見方を解説!
Googleマップには地図以外にもストリートビューがあります。360度のパノラマ写真で現地を...

APIを埋め込んだGoogleマップを使うには

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

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

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

APIキーの利用を制限する

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

Googleマップ認証画面

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

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

Geocoding APIを有効にする

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

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

ThumbGoogleマップのオフラインでの使い方!地図をダウンロードできない対処法は?
日本でも海外でもオフラインで利用できるGoogleマップのオフライン機能をご紹介します。Go...

Googleマップが表示されない時はAPIキーを設定しよう

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

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

関連するまとめ

Original
この記事のライター
春風
犬猫カラスフェレットハムスター、爬虫類以外の飼育経験があります。新しいアプリも節約方法も最新を知りたい春風です。よ...