Googleマップをホームページに埋め込み！API仕様変更後も無料で地図を表示させるには？

Googleの地図を多用しているホームページである場合、Googleマップの地図が表示されなくなる仕様変更に困った方は多いのではないでしょうか。これから新しくGoogleマップの地図をホームページ上に掲載しようと考えておられる方の場合、それらが無料でできるかどうかも気になる所です。

これからホームページにGoogleマップの地図を埋め込むための方に、無料で埋め込みできる方法やGoogleマップの便利な使い方、APIキーの設定方法を詳しくお伝えしていきます。

2018年7月16日からGoogleは、地図表示についての仕様を大きく変えました。その際、APIキーの設定がされてないアカウントがGoogleマップの地図をホームページに埋め込みしていると、それらは全て表示されなくなっています。

多くのショップを地図と共に表示していた会社などは、この仕様変更で困る状態になっている方も多かったようです。

検索で見ることのできるGoogleMapからホームページに埋め込むために取得したURL（iframe）利用であれば、料金が発生する心配はありません。ただし、Static Maps API・Maps JavaScript API・Maps Embed APIを利用して多くのマップ画像を張り付けておられる方は、APIキーがないと表示されない状態になります。

ただし、APIキーを必要とするそれらの地図であっても、上限を超える利用がなければ追加料金は発生しません。また、超えた時点で自動的に追加課金されてしまうシステムですが、Google国内代理店に確認してみましょう。サポートプログラムを伝えているので、設定が通る可能性もあります。

先にお伝えしたiframeによるGoogle地図の貼り付けに関しては、現在も無料で利用できます。しかし、今現在APIキーの機能を利用しているか否かは、どのように確認するのでしょうか。Googleマップの仕様変更情報と、現時点で画像が表示されない問題はイコールではない場合があるため、「Google Maps Platform API Checker」でAPI利用があるか否かの確認がおこなえます。

iframeによるGoogle地図の貼り付けで、地図表示がされない場合、Googleマップ自体のエラーによるところが多くあります。修正されることで非表示が改善されていることから、Googleの地図に関する新システム情報で慌てることがないように、以下の確認作業をおこないましょう。

Googleが提供している「Google Maps Platform API Checker」を使って、APIキーを利用しているか否かを確認できます。Chromeの拡張機能であるため、ブラウザはGoogle Chromeを使います。

iframeのsrc属性が指定しているURLが「https://www.google.com/maps/embed?pb=」で始まっている事を確実できれば、APIキーを利用していないことが確実できます。上記のツールを利用しても、APIキーを利用していないにもかかわらず、使用していると通知することがあるので注意が必要です。

Googleマップの地図を無料で埋め込みして表示させるには、いくつかの方法があります。基本的にはAPIキーを必要としない、iframeとして地図をホームページに埋め込みます。これらのiframe埋め込み作業でできるサイズ変更などのカスタマイズ方法も含めiframeについて詳しく解説していきます。

Googleマップにアクセスします。目的地を検索し、表示されるマップ左上にある三本横ラインマークをクリックします。左側に表示される一覧「地図を共有または埋め込み」をクリックします。

埋め込みタブを選択すると、埋め込み可能なiframeURLが表示されているのでコピーします。コードをそのままホームページに張り付けするだけで、Googleマップがホームページに表示されます。iframeをそのまま利用するだけでなく、サイズ変更などのカスタマイズができることから、以下ではその選択方法を詳しくお伝えしています。

「地図を埋め込む」のタブを選択して表示される画像では、サイズ選択が可能です。iframeの埋め込みコード（URL)左側にある「中」は画像サイズを表します。こちらをクリックすることで、小（横400px ×　縦300px）・中（横600px × 縦450px)・大（横800px × 縦600px）・カスタムサイズ（自由入力）とサイズが選べます。