はじめに

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

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

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

埋め込みコードの利用

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

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

• Google マップ
• Yahoo!地図

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

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キーの取得方法は、次のドキュメントを参照してください*。

• Google Maps Embed API：API key

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

まずは、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などで設定することで、大量の地図表示を扱うことができるわけです。

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

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

地点表示

• サンプル：Google Maps Embed APIを利用し、マーカーを配置

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

• エンドポイント：https://www.google.com/maps/embed/v1/place

例えば、ピクセルグリッドのオフィスにピンを建てる場合は、オフィスの住所「東京都渋谷区神宮前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>

経路表示

• サンプル：Google Maps Embed APIを利用し、経路情報を表示

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

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

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

• エンドポイント：https://www.google.com/maps/embed/v1/directions

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

<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>

ストリートビューの表示

• Google Maps Embed APIを利用し、ストリートビューを表示

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

• エンドポイント：https://www.google.com/maps/embed/v1/streetview

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

<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を利用した動的な地図の埋め込み

このデモでは、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の地図から取得しなくても、住所やランドマーク名のデータがあれば動的に埋め込めるということです。

まとめ

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

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