下記の情報は古い情報になります。2018年6月11日よりGoogle Maps Embed APIはGoogle Maps Platformに統合され有料になりました。(月200ドル分は無料)
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キー¢er=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¢er=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マップからでもほぼ同じことができるのではないかと思いますが、パラメーターの調整は手動の方がやりやいのではないでしょうか。