メディア掲載_Web Designing

Web Designing 2012年3月号

執筆:丸茂朋弘 執筆:丸茂朋弘

SmartphoneLab.2012年3月号

位置情報を取得して案内マップを作ろう

スマートフォンはパーソナルなツールであり、常に携帯しているものである。屋外でも移動中でも気軽に、そしてPC並みのクオリティでWebサイトにアクセスできることは非常に便利で、スマートフォンを使う大きな魅力でもある。そんなスマートフォンならではの機能として、位置情報機能がある。今回は位置情報機能を使って簡単なWebアプリ「案内マップ」を作ってみよう。

位置情報機能とGoogle Maps APIを使って案内マップを実装する。

位置情報機能とは、GPSやアクセスポイントからの情報を利用して、「今どこにいるのか」をデータとして取得できる機能のことだ。現在の一般的なスマートフォンにはこの機能が標準的に装備されており、地図アプリ(01)などで利用されている。取得できる値としては、緯度・経度、高度、方向、水平・垂直の誤差などがある。

01iPhoneの「マップ」アプリ

01 iPhoneの「マップ」アプリ

iPhoneに標準でインストールされているアプリ「マップ」。「Googleマップ」を利用している

02Google Maps API

02 Google Maps API

JavaScriptを使った「MapsJavaScriptAPI」をはじめ、Flash用APIや「GoogleEarth」のAPIなども用意されている

これらの値を取得した後、目に見える形で表現するために、「Google Maps API」(02)がよく用いられる。「Google Maps API」はGoogleが提供するAPIサービスで、地図情報やルート検索といった「Googleマップ」のリソースを一般の開発者が簡単に利用することができる、非常に便利なサービスだ。

今回は「Google Maps API」の中から、「Maps JavaScript API」を使ってブラウザ上で案内マップを作成してみよう。このような案内マップは、店舗検索や会社案内など、さまざまなところで活用されている(03)。

03「スターバックス」スマートフォンサイト

03 「 スターバックス」スマートフォンサイト

店舗検索方法の一つとして、位置情報での検索が用意されており、現在地から付近の店舗までのルートを確認できる

SECTION1 目的地を表示させよう

SECTION1 目的地を表示させよう

まずは「Maps JavaScript API」を使って、地図上に案内マップの目的地として新宿駅を表示させてみよう。「Maps JavaScript API」で用意されたJavaScriptを記述すれば、少しのカスタマイズのみで目的地の表示が可能になる。

APIを読み込む

「Maps JavaScript API」を利用するために、HTMLのhead要素内でGoogleのサイトからAPIを読み込む(01)。src属性の末尾の「sensor=true」は、GPSなどの位置検知センサーを利用するかどうかを設定している。スマートフォン向けサイトでは、センサーを利用する「true」に設定しておこう。

01「Maps JavaScript API」の読み込み

01 「Maps JavaScript API」の読み込み

srcの値の末尾に「&language=ja」を付加すると、ブラウザの言語設定を無視して強制的に日本語で表示できる

HTMLの記述

HTMLは非常にシンプルだ(02)。ページ表示時にinitialize()関数を実行するために、body要素にonloadを設定し、地図の出力先としてdiv要素にid「map_canvas」を指定する。

02HTMLの記述

02 HTMLの記述

スタイルは各々デザインに合わせて任意で設定する。ここでは幅も高さも100%に設定している

JavaScriptの記述

JavaScript(03)では、まずinitialize()関数で、マップの初期設定を行っている。
01では緯度と経度を指定する。ここでは目的地として新宿駅(緯度:35.69093、経度:139.700254)を指定しているが、任意の値に変更すればそこが目的地となる。緯度と経度は「Googleマップ」で簡単に調べられる(04)。
次に02で地図の表示設定を行う。「zoom」は初期ズームレベル、「center」は地図の中心位置、「mapTypeId」は表示する地図の種類だ。
03で表示する地図を定義し、出力先(表示先)を設定する。今回は、HTML内のidが「map_canvas」の要素に出力される。

03目的地表示のJavaScript

03 目的地表示のJavaScript

追加の記述により、マーカーは任意のアイコンに変更できる。

04緯度・経度の調べ方

04 緯度・経度の調べ方

PCのGoogleマップ上で右クリックして「この場所について」を選択すると、検索バーに緯度と経度が表示される

マーカーの設置

これで目的地中心の地図を表示できるが、目的地にもマーカーを設置しよう(05)。04のように、「position」でマーカーの表示位置を、「map」でどの地図に出力するかを設定する。

05目的地表示の完成

05 目的地表示の完成

目的が地図の中央に表示され、マーカーが表示されている

SECTION2 現在地を表示させよう

SECTION2 現在地を表示させよう

ここからはスマートフォンの「位置情報機能」を使って、ユーザーの現在地の情報を地図に反映する方法について見ていこう。位置情報を取得するには、W3Cが仕様策定を進めている「Geolocation API」というAPIを用いてJavaScriptで位置情報を取り扱う。

getCurrentPositionメソッド

Geolocation APIには3つのメソッドがあるが、今回はユーザーの現在の位置情報を一回だけ取得する際に用いる「getCurrentPosition」メソッドを使用する。getCurrentPositionメソッドは、01のような構造になっている。

01getCurrentPositionの構造

01 getCurrentPositionの構造

1つ目と2つ目の引数は、成功・失敗それぞれ確定「後」に実行される(コールバック)

JavaScriptの記述

現在地情報を取得し、地図にマーキングする関数「currentLocation()」を作成する(02)。
位置情報の取得に成功したら、その値を変数に代入し、さらにその変数を利用して現在地にマーカーを設置する(01)。位置情報の取得に成功したら現在地を表示し、失敗したらエラーメッセージを表示するように設定する(02)。
getCurrentPositionメソッドの3番目の引数はオプションだが、より精度の高い位置情報を取得するよう命令している(03)。

02現在地情報を取得する

02 現在地情報を取得する

位置情報取得成功時に緯度と経度を変数に代入し、それを元にマーカーを設置する

最後にSECTION1で作成したinitialize()関数内の末尾にcurrentLocation()関数を起動させる記述を追記(03)すれば、SECTION1で作成した地図内に現在地をマーキングした地図が完成する(04)。
なお、現在地は地図で中心には表示されないので、目的地と遠い場所にいる場合はピンチアウトで地図を縮小して確認しよう。

04目的地と現在地のマーキングの完成図

04 目的地と現在地のマーキングの完成図

目的地と現在地にマーカーが表示される。現在地は、地図で見えている範囲に収まっているとは限らない

03currentLocation関数の起動

03 currentLocation関数の起動

目的地表示後に現在地情報を取得する(04

現在地をより正確に取得するには?

この例ではgetCurrentPosition()メソッドを用いて一度だけ位置情報を取得し、現在地を表示させているが、取得した位置情報の精度が悪いと、時には数百mもの誤差が生じてしまう。
これを防ぐ方法として、Geolocation APIの位置情報取得のもう1つのメソッドであるwatchPosition()メソッドの利用が挙げられる。watchPosition()メソッドは、一度だけ取得するgetCurrentPosition()メソッドとは違い、継続的に位置情報を取得し続ける。位置情報の中には、緯度・経度の誤差の値が含まれているので、この値が指定した値以下になるまで取得し続ければ、より信頼性の高い現在地情報が取得できる。
ただし、この場合、通信速度が悪い環境では正確な位置情報の取得まで時間がかかる場合があるので、タイムアウトの処理をしておく必要がある。

SECTION3 現在地から目的地までのルートを表示させよう

SECTION3 現在地から目的地までのルートを表示させよう

ここまでで目的地と現在地の2点の位置情報を取得した。今回の案内マップでは、現在地から目的地までどのような道筋をたどっていけばよいのか、この2点間を結ぶルートを表示させてみよう。ルートは「Google Maps APIルートサービス」を利用して取得する。

準備

SECTION2で作成したスクリプトを利用してルートを作成するが、ルートを表示させた場合、現在地点と目的地点の両方に自動的にマーカーが補完される。そのため今回はデフォルトのマーカーは不要になるので、記述を削除しておこう(01)。

01マーカーの削除

01 マーカーの削除

ここではわかりやすいように通常のマーカー(01、02)を削除する。ルート表示時に自動的に表示されるマーカーを非表示にする方法もある

02記述の追加

02 記述の追加

基本的なコードは変わらないが、ルート表示用の記述を多少加えている

JavaScriptの記述

01のスクリプトに記述を加えていく(02)。「Google Maps APIルートサービス」を利用するために「DirectionsServiceオブジェクト」を、ルート結果を地図上に表示するために「DirectionsRendererオブジェクト」を使用する。0304は、この2つのオブジェクトを作成している。
05でルートを表示する地図を指定する。今回は直前で定義している「map」にルートを表示する。ルートには目的地と現在地の緯度・経度が必要なので、06で目的地の緯度・経度を引数にして現在地を取得するcurrentLocation関数を実行する。さらに、現在地の緯度・経度を引数にして、ルートを表示させるcalcRoute関数を実行する(07

ルートを表示させる関数は、03のように記述する。この中でカスタマイズが必要なのは、request内の値だ。「origin」は出発地点、「destination」は到着地点、「travelMode」は交通手段を指定する。
今回は現在地を出発点(08)とし、目的地である新宿駅を到着地点(09)、交通手段は徒歩(10)を指定した。
これらの記述で、地図上に現在地から目的地までのルートが表示される(04

03ルート表示関数の記述

03 ルート表示関数の記述

交通手段は、日本では徒歩ルート(WALKING)の他に、運転ルート(DRIVING)が選択できる

04ルート表示の完成

04 ルート表示の完成

現在地から目的地までの徒歩ルートが表示された

お問い合わせはこちらからどうぞ