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）・カスタムサイズ（自由入力）とサイズが選べます。

先にお伝えしたiframeによる埋め込みコード取得前に、検索した目的地とそこへ向かうための検索ルートを更に表示させます。検索先だけでなく、パラメーターを指定したマップ作製が可能です。その他のパラメーター指定の方法は、それぞれ個別に以下で解説しています。共有を利用した便利な方法なので実際におこなってみるのがおすすめです。

Googleマップで目的地を検索し、ピンを刺した状態で上記でお伝えしたのと同様に「地図を共有または埋め込む」か共有ボタンをクリックします。地図を埋め込むタブを選ぶだけで、ホームページやブログに埋め込めるURLが取得できます。その際、サイズ変更もできます。

Googleマップ上にピンがたっている状態であれば、名称と共に住所が記載された貼り付けコードの取得が可能です。「地図を埋め込む」タブを選び、サイズ変更をして埋め込みが可能です。

ブログやホームページに貼り付けできるコード（URL）には、既に緯度と経度が組み込まれたものになっています。「iframe src=アルファベットのURL 数字の羅列＝数字」と表記されているので、数字の羅列と最後の数字の間に「&ll=」を書きたします。地図の中央を指定したい時に便利です。

iframe src=アルファベットのURL 数字の羅列&ll＝数字

今まで旅行した場所、美味しいレストランを記録したマイマップもホームページやブログに貼り付けることができます。その都度場所を調べる手間も省け、共有したい相手にすぐ伝えるのにも便利です。ホームページに予め埋め込みしておけば、追加する都度更新されるので埋め込みをしなおす手間もありません。

手順も上記でお伝えしたものと同様で、地図のメニュー一覧から「地図を埋め込み」を選び埋め込みコードを取得します。ホームページだけでなく、SNS共有などにも使えます。張り付ける前に、Googleマイマップから公開範囲を決めてマイマップ作成ができます。

カスタマイズ性の高い埋め込み地図といえば、やはりGoogleMapsPlatformの利用でしょう。埋め込みには、＄200以内の利用で実質無料となります。しかし、$200分を超えた所から超過分の請求があるので注意が必要です。そんなGoogleMapsPlatformを利用した地図の埋め込み手順を下記でお伝えしていきます。

ひとまずAPIキーを取得するためには、Googleアカウントが必要になります。Googleにログインした状態で、新しいプロジェクトを作成しAPIの有効化をおこないます。この手順を経て、APIキーが発行されます。

＄200分の無料を超えを超えた分から、超過分がかかります。超過分に関しては、公式サイトのマップ料金表で確認できます。

API仕様変更後も無料で地図を表示させるための情報をまとめていますので、APIキーを使った場合の超過分に関しては自分のホームページのアクセス件数を元に超過分を想定する必要があります。

料金の発生しないGoogleマップを表示したい場合は、iframeを使った地図の埋め込みが確実なので地図性能を比較して決めるとよいでしょう。