サイト制作に関するメモ書き

HOME > その他 > Google Maps Embed APIを使ってみる

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】
MODE マップの種類を指定。
place/directions/search/view/streetviewのいずれかを選択。
API_KEY APIキーを指定。
parameters マップのオプションを指定。
マップ上の場所を指定する場合は名前、住所、プレイスIDのいずれかで指定し、URLエスケープが必要。

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

マップのモード

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

Placeモード

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

q マップ上で表示する場所を指定。

実際に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モードは指定した地点間のルート・距離などをマップ上に表示します。
以下のパラメータが必須になります。

origin ルートの始点を指定。
destination ルートの終点を指定。

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モードで使える他のパラメータもいくつか試してみます。

waypoints ルートの始点と終点の間に1か所以上の経由地を指定。
複数の経由地を指定する場合はパイプ文字(|)を使って区切る。

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のデモページ

mode 移動手段を指定。
値はdriving/walking/bicycling/transit/flyingのいずれかを選択。

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のデモページ

avoid 通行料金の発生する道やフェリー、高速道路を避ける場合に指定。
値はtolls/ferries/highwaysで、複数指定する場合はパイプ文字(|)を使って区切る。

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モードはマップの領域に検索結果を表示します。
以下のパラメータが必須になります。

q 検索キーワードを指定。

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モードはピンやマーカーが表示されていないマップを表示します。
以下のパラメータが必須になります。

center マップの中心の緯度経度をコンマ区切りで指定。

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ストリートビューで指定した位置を表示します。
以下のパラメータが必須になります。

location 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モードのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP