Googleマップ 埋め込み地図の比較 - Google Maps Embed API

2017年8月23日現在、手軽にGoogleマップをホームページに埋め込むことができるGoogle Maps Embed APIの比較です。

GoogleマップのAPIといえば、Google Map JavaScript API（価格は標準プランとプレミアムプランがあり、標準プランでは1日あたり最大 25,000 回のロードが無料）が歴史もあり、カスタマイズの自由度が高いので弊社でもよく使用させていただいておりますがGoogle Maps Embed APIはそれほど使用した機会がありませんでした。この際勉強のためにもガイドに沿ってシンプルな地図を作りGoogle Maps Embed API比較してみました。

Google Maps Embed APIのメリットとして、Webサイトで使用する場合、無料で無制限に利用でき、いくつかのバリエーションもあり、iframeをホームページに埋め込むだけでプログラムはほとんど使いません（URLのパラメーターの変更）。ですので、Googleマップを使用してちょっと気の利いた地図をという場合にはもってこいかもしれません。

中でも一番手軽にGoogleマップを扱う方法は、クイック スタート マップに値を入力してiframeを書き出してもらう方法ですが、今回はガイドに沿ってiframeのsrc内に手動でパラメータを入力しています。

APIキーはGoogle Map Embed APIページ内のキーの取得というボタンをクリックして取得できます。

Place Mode

特定の場所を示す地図: 岡山駅の地図

<iframe 
src="https://www.google.com/maps/embed/v1/place?key=あなたのAPIキー&q=岡山+駅,岡山+県" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

特定の場所をマーカーで示す基本的な地図で、その場所やお店、企業に口コミがあれば表示されます。

この地図はsrc内のqのあとにマーカーを置く場所を指定し、「岡山県の岡山駅」を表示するために岡山+駅,岡山+県をパラメーターとして入れています。

Directions Mode

ルート地図: 車で（有料道路、高速道路を除いた）岡山駅から尾道港（広島県）までのルート地図

<iframe 
src="https://www.google.com/maps/embed/v1/directions?key=あなたのAPIキー&origin=岡山+駅,岡山+県&destination=尾道+港,広島+県&mode=driving&avoid=tolls|highways" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

出発地点と目的地点のルートを表示させ、移動に使用する乗り物や徒歩での距離と時間を表示します。

この地図はsrc内の出発地点を意味するoriginのあとにの岡山駅岡山+駅,岡山+県を入れ、目的地点を意味するdestinationのあとに広島県（尾道市）の尾道港尾道+港,広島+県を入れています。移動する乗り物は車を想定し移動の手段modeのあとに車を意味するdrivingを入れ、有料道路と高速道路を除外するためにavoidのあとにtolls|highwaysをパラメーターとして入れています。

ルート地図: 電車・バスを使い岡山駅から金毘羅宮（香川県）までのルート地図

<iframe 
src="https://www.google.com/maps/embed/v1/directions?key=あなたのAPIキー&origin=岡山+駅,岡山+県&destination=金毘羅宮,香川+県&mode=transit" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

この地図はsrc内のorigin出発地点のあとに岡山駅の場所岡山+駅,岡山+県を入れ、目的地点destinationのあとに香川県（仲多度郡琴平町）の金毘羅宮金毘羅宮,香川+県を入れています。移動手段は電車とバスを想定しmodeのあとに交通機関（電車とバス）を意味するtransitをパラメーターとして入れています。

Search Mode

検索地図: 香川県のうどん屋さんの地図

<iframe 
src="https://www.google.com/maps/embed/v1/search?zoom=9&key=あなたのAPIキー&q=うどん+in+香川+県" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

この地図は「香川県のうどん屋さん」を表示するためにsrc内のqのあとにうどん屋さんを表示するためのうどんを入れ、香川県内を指定するためin+香川+県をパラメーターとして入れています。

View Mode

サテライト地図: 岡山駅のサテライト地図

<iframe 
src="https://www.google.com/maps/embed/v1/view?key=あなたのAPIキー&center=34.666401,133.918637&zoom=18&maptype=satellite" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

この地図はsrc内のcenterで岡山駅の緯度と経度34.666401,133.918637を指定し、地図のタイプをサテライトに指定しています。zoom=18は地図のズームレベルを18にしているものです。

Street View Mode

ストリートビュー: 岡山駅のストリートビュー（駅構内）

<iframe 
src="https://www.google.com/maps/embed/v1/streetview?location=34.6664,133.9186&key=あなたのAPIキー" 
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

この地図はsrc内に地図のタイプをストリートビューstreetviewに指定し、locationで岡山駅の緯度と経度34.666401,133.918637を指定しています。

Area Mode(?)

周辺（エリア）地図: 岡山駅周辺の地図

<iframe 
src="https://www.google.com/maps/embed/v1/view?zoom=16&center=34.666401,133.918637&key=あなたのAPIキー"  
width="1400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

岡山駅周辺の地図を表示させています。zoom=16はこの地図のズームレベルで岡山駅の緯度と経度はcenter=34.666401,133.918637のパラメーターです。

今回の一通り地図を制作してみた感想としては、Google Maps Embed APIは非常に扱いやすく簡単だということです。

APIを使用しない通常のGoogleマップからでもほぼ同じことができるのではないかと思いますが、パラメーターの調整は手動の方がやりやいのではないでしょうか。