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

Googleマップが新サービスに移行したため、今までをホームページに埋め込みマップが表示されないといった話を多く聞きます。Google地図の新サービス以降を無料で利用する方法と埋め込み方法をわかりやすく解説していきます。

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

目次

  1. 1GoogleマップをAPI仕様変更後も無料で埋め込み・表示するには?
  2. 7月16日からGoogleマップの仕様が変更
  3. GoogleMapを無料で利用する条件
  4. 2GoogleマップでAPIを利用しているか確認しよう
  5. APIを利用している場合
  6. APIを利用しない場合
  7. 3Googleマップをホームページに無料で埋め込み・表示させる方法
  8. 埋め込み用コードを取得してiframeとして貼り付ける
  9. iframeでパラメーターを指定して貼り付ける
  10. 4Googleマップでカスタマイズ性の高い地図を埋め込むには?
  11. APIキーを取得する必要がある
  12. 料金プラン一覧
  13. 5Googleマップをホームページに埋め込もう!

GoogleマップをAPI仕様変更後も無料で埋め込み・表示するには?

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

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

7月16日からGoogleマップの仕様が変更

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

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

GoogleMapを無料で利用する条件

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

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

GoogleマップでAPIを利用しているか確認しよう

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

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

APIを利用している場合

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

APIを利用しない場合

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

Googleマップをホームページに無料で埋め込み・表示させる方法

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

埋め込み用コードを取得してiframeとして貼り付ける

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

Googleマップ埋め込み方法

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

サイズは小・中・大・カスタマイズと選択できる

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

Googleマップ埋め込み時のカスタマイズ画面

iframeでパラメーターを指定して貼り付ける

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

Googleマップ埋め込み共有画面

名称の場合

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

住所の場合

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

Googleマップ住所

緯度・経度の場合

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

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

マイマップを貼り付ける

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

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

Googleマップでカスタマイズ性の高い地図を埋め込むには?

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

APIキーを取得する必要がある

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

料金プラン一覧

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

月額使用料 $200分
モバイル 無制限
静的マップ 最大100.000ロード
静的マップ 最大28.500ロード
静的ストリートビュー 最大28.500ロード
静的ストリートビュー 最大14.000ロード

Googleマップをホームページに埋め込もう!

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

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

関連するまとめ

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