Webマップの実装手法 第1回 地図サービスの利用

このシリーズでは、WebサイトやWebアプリケーションへの地図実装手法を解説します。初回はもっとも手軽なGoogle マップやYahoo!地図サービス、さらにGoogle Maps Embed APIを取り上げます。

発行

著者 柿内 暢昌 フロントエンド・エンジニア
Webマップの実装手法 シリーズの記事一覧

記事執筆当初からGoogleMapの仕様が変わり、現在はデモが動作していません。最新の仕様については、公式ドキュメントを参照ください。

はじめに

2005年にGoogleがGoogle マップを発表して以来、Yahoo*、Microsoftなど、さまざまなベンダーがWeb上で利用できるインタラクティブな地図を提供するようになりました。

*注:Yahooが提供する地図サービス

2015年6月4日(現地時間)にYahooは、いくつかのプロダクトのサポートを終了すると発表しました。

その中にYahooの地図サービスも含まれており、maps.yahoo.comのサイトを6月末で閉鎖することが述べられています(Yahoo!検索、Flickrなどいくつかの関連サービスにおいては使用可能)。

日本で提供されているYahooの地図サービスについては、上記の文章中には言及がありませんが、何らかの影響があるかもしれません。

最近では、すべてのスマートフォンにGPSセンサーが搭載され、メタデータとして位置情報が付与されることもあたりまえになりました。それにともなって、位置情報と地図を組み合わせたサービスが多く提供されています。

この記事では地図サービスを利用した一連のアプリケーション開発について基本的な部分を解説していきます。以降ではこれらWebサイト上で提供される地図を総称して「地図サービス」と、またWeb上で利用するインタラクティブな地図を「Webマップ」と呼ぶことにします。また、地図サービスなどの仕様はすべて2015年5月初旬現在のものです。今後、仕様の変更などにともない記事内容との相違が出る場合があります。

埋め込みコードの利用

Webサイトに地図を埋め込むもっとも簡単な方法は、各種地図サービスで提供される埋め込みコードを利用することです。

Google マップやYahoo!地図で目的の場所を表示した状態で埋め込みコードを取得すれば、同じ地図をサイト上に埋め込むことができます。

右下の歯車のアイコンをクリックし、[地図を共有または埋め込む]を選択する。

リンクと埋め込みの2形式から選択可能。

右上のURLボタンをクリックすると、埋め込みコードなどが取得できる画面が開く。

また、検索窓から特定の場所を入力し、結果が表示された状態で埋め込みコードを取得すれば「特定の位置にピンを建てた地図」を埋め込むことも可能です。

Google Maps Embed APIの利用

各地図サービスの埋め込みコード発行機能は気軽に使えて便利ではあるのですが、たくさんの地図が必要な場合などには向いていません。

例えば「1,000件の不動産情報を公開しているページで、それぞれの物件に地図の埋め込みが必要」になったとします。1,000件の物件の住所から目的の地図を1つずつ表示し、そのつど埋め込みコード取得するのは、とても骨が折れる作業の上、確実性もあまりありません。

できれば、管理している住所情報にもとづいて地図を自動で埋め込んで解決したいものです。

そのような使い方を想定しているのが、Google Maps Embed APIです。

Google Maps Embed APIではiframeのsrc属性に、クエリパラメーター付きのURLを指定することでさまざまな目的に合った地図を埋め込むことがでます。

前述の例であれば、住所をクエリパラメーターに指定するプログラムを作成することで、1,000件分の地図を自動で埋め込むことが可能になります。

また、経路情報やストリートビューを表示した、もう少し高度な地図を埋め込むことも可能です。

利用するためにはAPIキーの取得が必要ですが、APIキーはGoogleアカウントがあれば誰でも無料で取得できます。

APIキーの取得方法は、次のドキュメントを参照してください*。

*注:APIキーの取得

APIキーの取得はどのAPIでも無料ですが、同じ地図を扱うAPIでも、APIによっては使用量(1日のリクエスト数)によって、課金が必要になるものもあります。ここで紹介しているGoogle Maps Embed APIは課金されませんが、1日に2,000,000リクエストまでという制限がかけられています(2015年5月18日現在)。なお、課金規定は今後、変更になる場合もありますので、利用時には課金規定を事前に調べておくことが必要です。

埋め込みコード生成機能を利用する

まずは、Google Maps Embed APIへアクセスし、このAPIで表示できる地図を見てみましょう。

サイトにアクセスしたら「BUILD A MAP」のボタンをクリックします。質問に答えるだけの、チュートリアルにしたがうと、次のような表示の地図を埋め込むためのコードが取得できます。コードを取得するには、APIキーが必要となります。

  • 特定の住所や、緯度経度にマーカーを立てた表示(Highlight a place or an address)
  • 「レストラン」などの施設、ランドマークの検索結果を表示。「in 東京駅」などで場所の特定をすることもできる(Show the results of a search)
  • スタート(Origin)とゴール(Destination)を設定し、車での経路を表示(Show driving directions)
  • ストリートビューあるいはカスタムのパノラマ表示(Show Street View or a custom panorama)
  • 指定したエリアの地図を表示するだけ(Just show a map of an area)

このサイトで取得できるコードは、次のような形式になっています。

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&key=..."></iframe>

このHTMLの中にあるhttps://www.google.com/maps/embed/v1/place?q=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&key=...のクエリーパラメーター部分を、JavaScriptなどで設定することで、大量の地図表示を扱うことができるわけです。

クエリパラーメーターによる指定

では、クエリパラメーターの代表的なものについて解説していきます。

地点表示

もっとも利用されるものは、特定の地点にお馴染みのマーカーを配置した地図でしょう。住所やランドマーク名を指定し、その地点へマーカーを追加したいときには、Place Modeを利用します。

  • エンドポイントhttps://www.google.com/maps/embed/v1/place
パラメーター 意味
key q
APIキー URLエンコードした住所、ランドマーク名、緯度経度

例えば、ピクセルグリッドのオフィスにピンを建てる場合は、オフィスの住所「東京都渋谷区神宮前3-32-5」をURLエンコードしたものをqに指定します。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=%e6%9d%b1%e4%ba%ac%e9%83%bd%e6%b8%8b%e8%b0%b7%e5%8c%ba%e7%a5%9e%e5%ae%ae%e5%89%8d3%2d32%2d5
">
</iframe>

住所やランドマーク名だけではなく、緯度経度を指定することも可能です。その場合は"34.649388888,135.001472222"のように緯度経度をカンマで区切ったものをqに指定します。次の例は日本の標準時明石天文台を指定したものです。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q==34%2e649388888%2c135%2e001472222
">
</iframe>

経路表示

最寄り駅からオフィスのまでの道順のような経路情報を表示する場合はDirections modeを利用します。modeパラメーターを指定することにより、移動手段を選ぶこともできます。

移動手段としては、次のようなものが準備されています。

modeパラメーター 意味
driving
walking 徒歩
bicycling 自転車
transit 公共交通機関
flying 飛行機

さらに、経由地や高速道路を利用しないといった設定も可能です。

  • エンドポイントhttps://www.google.com/maps/embed/v1/directions
パラメーター 意味
key APIキー
origin URLエンコードしたスタート地点の住所・ランドマーク名、スタート地点の緯度経度
destination URLエンコードしたゴール地点の住所・ランドマーク名、スタート地点の緯度経度
waypoints 立ち寄り地、"|"を利用して複数地点の指定が可能
avoid 高速道路や有料道路の回避
mode 移動手段

次の例では、東京駅を出発点として、原宿駅、日吉駅を経由して横浜駅へ行く経路を指定しています。また、有料道路と高速道路を利用しないようにしています。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBtqYxf1l8w27V9ZyrCdasyl-Wq17EzkdI
  &origin=%e6%9d%b1%e4%ba%ac%e9%a7%85
  &waypoints=%e5%8e%9f%e5%ae%bf%e9%a7%85|%e6%97%a5%e5%90%89%e9%a7%85
  &destination=%e6%a8%aa%e6%b5%9c%e9%a7%85
  &avoid=tolls|highways
  &mode=driving">
</iframe>

ストリートビューの表示

Street View modeを利用すると特定地点のストリートビューを埋め込むことができます。ストリートビューを表示する際は、目的の場所の緯度経度、カメラの方位、仰角、画角を指定します。

  • エンドポイントhttps://www.google.com/maps/embed/v1/streetview
パラメーター 意味
key APIキー
location 目的の地点の緯度経度(住所を指定することはできない)
heading 真北向きを0度とした、カメラの方位
pitch 仰角。カメラの縦方向の傾き
fov 画角

次の例は、場所がわかり難いと評判のピクセルグリッドのオフィスをストリートビューで表示したものです。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/streetview?key=AIzaSyBtqYxf1l8w27V9ZyrCdasyl-Wq17EzkdI&location=35.671560,139.710675
  &heading=60
  &pitch=0
  &fov=100">
</iframe>

動的な地図の埋め込み

ここまでクエリパラメーターを説明してきましたが、実際にどのように動的に地図を生成するか、簡単なデモで解説します。

このデモでは、Google Maps Embed APIを利用し、著名なランドマークを表示する地図を動的に埋め込んでみました。

コードは次のとおりです。

var landmarks = [
  '東京スカイツリー',
  '東京タワー',
  '横浜ランドマークタワー',
  '国会議事堂',
  'エッフェル塔',
  '通天閣',
  '東京駅',
  'エンパイアステートビル',
  '明治神宮'
];

var endpoint = 'https://www.google.com/maps/embed/v1/place?key=[API_KEY]';


for( var i = 0,l = landmarks.length ; i < l; i++ ){
  var element = document.createElement( 'iframe' );
  element.width = 225;
  element.height = 225;
  element.className = 'map-container';

  var apisrc = endpoint + '&q=' +encodeURI( landmarks[i] );
  element.src = apisrc;

  document.body.appendChild( element );
}

このコードで重要な部分は次の部分です。

var apisrc = endpoint + '&q=' +encodeURI( landmarks[i] );
element.src = apisrc;

document.body.appendChild( element );

変数endpointには、placeモードのエンドポイントにAPIキーが指定されたURLが格納されています。そこに、qパラメーターに各ランドマーク名をURLエンコードしたものを代入し、最終的にiframeのsrc属性に指定するURLを生成しています。生成したiframe要素をbodyに追加すれば、地図の埋め込みは完了です。

デモでは、配列のデータを利用して動的に生成していますが、Webアプリケーションの実装では、データベースに格納した住所データなどを利用してもいいでしょう。

ほかにもさまざまな手法がありますが、ここで重要なのは、表示したい地図の埋め込みコードをGoogle Mapsの地図から取得しなくても、住所やランドマーク名のデータがあれば動的に埋め込めるということです。

コラム : Google Mapsの利用規約について

Google マップは非常に人気のあるサービスで、Web上の地図のほとんどがGoogle マップを利用しているといってもいいと思います。基本的に無料で利用でき、自由に地図を埋め込むことができますが、もちろん利用規約は存在します。

実は、Google マップは(Google Maps JavaScript APIやGoogle Maps Embed APIも含めて)利用規約の中で、インターネットに公開され、誰でもアクセスできる場所以外での利用を許可していません(利用規約の「9. License Requirements.」を参照してください)。

具体的には、会員制有料サービスや有料アプリ、イントラネット内での利用、アクセス制限がされているサイト、さらに無料会員制のサービスでも招待制のものでは利用することができません。

これらのサービスで利用するための「Google Maps for Works」というサービスが提供され、そちらを利用するように明言されています(利用料については一般に公開されていません。3年ほど前に公開されていたものだと、1万ドル/年〜でした)。

非常に高機能かつ気軽に利用できるサービスなので、地図といえばGoogle マップと考えてしまいますが、アクセスが完全にパブリックでないサイトでは、利用料を払いGoogle Maps for Worksを利用するか、ほかのサービスもしくはオープンソースのOpenStreetMapなどを利用することも検討するべきでしょう。

また、誰でもアクセスできるサイトであっても、今回紹介したGoogle Maps Embed APIより、さらに高機能なGoogle Maps JavaScript API v3は、1日のリクエスト数に制限があり、それを超えた場合、課金(Google Cloud Platform)が必要となってきます。

サービスをリリースした後、「実は高額(かどうかもわかりませんが……)なライセンスが必要でした。」では洒落になりませんので、Google Maps APIはもちろんのこと、ほかの地図サービスを利用する場合でも、各サービスの利用規約は必ず確認してください。

まとめ

このように、Googe Maps Embed APIを利用すれば、さまざまな地図を埋め込むことができます。またGoogle マップに限らず、Yahoo!地図などでもカスタマイズした地図の埋め込み方法が提供されています。

このシリーズでは、次回以降APIとJavaScriptライブラリを利用した地図アプリケーションの実装について解説をしていきますが、まずは、埋め込み機能だけで目的の地図を実装できるか検討する価値はあるでしょう。