Google Maps Embed APIを使ってみる

シンプルなHTMLのみでGoogle Mapsをカスタマイズできる「Google Maps Embed API」を使ってみます。

概要

Google Maps Embed APIには以下の特長があります。

使用制限がない

例えばGoogle Maps JavaScript APIの場合、1日25,000回のマップロードが無料などの使用制限が設定されていますが、Google Maps Embed APIにはそのような制限は設定されていません。
そのため、利用される回数などを気にせずに使用できます。

簡単に埋め込める

Google Mapsで複雑なことをしようとするとJavaScriptなどで実装しないといけないですが、このAPIはiframeのsrc属性のパラメータのみで設定するので、JavaScriptなどは使用しないで実装ができます。
src属性のURLの形式は以下のようになります。

https://www.google.com/maps/embed/v1/【MODE】?key=【API_KEY】&【parameters】

API_KEYで記載しているように、使用にはAPIキーの設定が必要になります。
APIキーの取得方法については以前記事を投稿していますので、あらかじめ取得しておいてください。
Google Maps APIの利用前にAPIキーを取得する
　

マップのモード

マップのモードは5種類あります。

Placeモード

Placeモードは一般的によく使われるマップで、特定のプレイスや住所にピンを立てて表示します。
URLに以下のパラメータが必須になります。

実際にPlaceモードのマップを埋め込んでみます。
※記事内のサンプルコードは分かりやすいように改行・URLエスケープ前のものを記載しています。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/place
    ?key=【API_KEY】
    &q=浩庵キャンプ場"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

Placeモードのデモページ

　

Directionsモード

Directionsモードは指定した地点間のルート・距離などをマップ上に表示します。
以下のパラメータが必須になります。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/directions
    ?key=【API_KEY】
    &origin=浩庵キャンプ場
    &destination=パインウッドキャンプ場"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

Directionsモードのデモページ

Directionsモードで使える他のパラメータもいくつか試してみます。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/directions
    ?key=【API_KEY】
    &origin=山梨市駅
    &destination=パインウッドキャンプ場
    &waypoints=笛吹川フルーツ公園
    |ほったらかし温泉"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

waypointsのデモページ

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/directions
    ?key=【API_KEY】
    &origin=山梨市駅
    &destination=パインウッドキャンプ場
    &waypoints=笛吹川フルーツ公園
    |ほったらかし温泉
    &mode=walking"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

modeのデモページ

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/directions
    ?key=【API_KEY】
    &origin=内船駅
    &destination=高ボッチ高原
    &waypoints=霧ヶ峰高原
    &avoid=tolls|highways"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

avoidのデモページ
　

Searchモード

Searchモードはマップの領域に検索結果を表示します。
以下のパラメータが必須になります。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/search
    ?key=【API_KEY】
    &q=山梨県 キャンプ場"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

Searchモードのデモページ
　

Viewモード

Viewモードはピンやマーカーが表示されていないマップを表示します。
以下のパラメータが必須になります。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/view
    ?key=【API_KEY】
    &center=35.473183,138.57476399999996
    &zoom=15"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

Viewモードのデモページ
　

Streetviewモード

StreetviewモードはGoogleストリートビューで指定した位置を表示します。
以下のパラメータが必須になります。

HTML

<iframe
  src="https://www.google.com/maps/embed/v1/streetview
    ?key=【API_KEY】
    &location=35.473183,138.57476399999996
    &heading=120
    &pitch=10"
  width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

必須項目ではないですが、headingでカメラの方向(北を起点とした方角)、pitchでカメラの角度(上向き・下向き)を調整しています。
Streetviewモードのデモページ
　

【参考サイト】

• Google Maps Embed API  |  Google Maps Embed API  |  Google Developers