位置情報を取得して案内マップを作ろうスマートフォンはパーソナルなツールであり、常に携帯しているものである。屋外でも移動中でも気軽に、そしてPC並みのクオリティでWebサイトにアクセスできることは非常に便利で、スマートフォンを使う大きな魅力でもある。そんなスマートフォンならではの機能として、位置情報機能がある。今回は位置情報機能を使って簡単なWebアプリ「案内マップ」を作ってみよう。APIを使って案内マップを実装する。位置情報機能とは、GPSやアクセスポイントからの情報を利用して、「今どこにいるのか」をデータとして取得できる機能のことだ。現在の一般的なスマートフォンにはこの機能が標準的に装備されており、地図アプリ(01)などで利用されている。01iPhoneの「マップ」アプリiPhoneに標準でインストールされているアプリ「マップ」。API」(02)がよく用いられる。API」はGoogleが提供するAPIサービスで、地図情報やルート検索といった「Googleマップ」のリソースを一般の開発者が簡単に利用することができる、非常に便利なサービスだ。API」を使ってブラウザ上で案内マップを作成してみよう。このような案内マップは、店舗検索や会社案内など、さまざまなところで活用されている(03)。API」を使って、地図上に案内マップの目的地として新宿駅を表示させてみよう。API」で用意されたJavaScriptを記述すれば、少しのカスタマイズのみで目的地の表示が可能になる。API」を利用するために、HTMLのhead要素内でGoogleのサイトからAPIを読み込む(01)。src属性の末尾の「sensor=true」は、GPSなどの位置検知センサーを利用するかどうかを設定している。スマートフォン向けサイトでは、センサーを利用する「true」に設定しておこう。API」の読み込みsrcの値の末尾に「&language=ja」を付加すると、ブラウザの言語設定を無視して強制的に日本語で表示できるHTMLの記述HTMLは非常にシンプルだ(02)。ページ表示時にinitialize()関数を実行するために、body要素にonloadを設定し、地図の出力先としてdiv要素にid「map_canvas」を指定する。02HTMLの記述スタイルは各々デザインに合わせて任意で設定する。ここでは幅も高さも100%に設定しているJavaScriptの記述JavaScript(03)では、まずinitialize()関数で、マップの初期設定を行っている。01では緯度と経度を指定する。ここでは目的地として新宿駅(緯度:35.69093、経度:139.700254)を指定しているが、任意の値に変更すればそこが目的地となる。緯度と経度は「Googleマップ」で簡単に調べられる(04)。次に02で地図の表示設定を行う。「zoom」は初期ズームレベル、「center」は地図の中心位置、「mapTypeId」は表示する地図の種類だ。03で表示する地図を定義し、出力先(表示先)を設定する。今回は、HTML内のidが「map_canvas」の要素に出力される。03目的地表示のJavaScript追加の記述により、マーカーは任意のアイコンに変更できる。04緯度・経度の調べ方PCのGoogleマップ上で右クリックして「この場所について」を選択すると、検索バーに緯度と経度が表示されるマーカーの設置これで目的地中心の地図を表示できるが、目的地にもマーカーを設置しよう(05)。04のように、「position」でマーカーの表示位置を、「map」でどの地図に出力するかを設定する。現在地を表示させようここからはスマートフォンの「位置情報機能」を使って、ユーザーの現在地の情報を地図に反映する方法について見ていこう。API」というAPIを用いてJavaScriptで位置情報を取り扱う。APIには3つのメソッドがあるが、今回はユーザーの現在の位置情報を一回だけ取得する際に用いる「getCurrentPosition」メソッドを使用する。getCurrentPositionメソッドは、01のような構造になっている。現在地情報を取得し、地図にマーキングする関数「currentLocation()」を作成する(02)。位置情報の取得に成功したら、その値を変数に代入し、さらにその変数を利用して現在地にマーカーを設置する(01)。位置情報の取得に成功したら現在地を表示し、失敗したらエラーメッセージを表示するように設定する(02)。getCurrentPositionメソッドの3番目の引数はオプションだが、より精度の高い位置情報を取得するよう命令している(03)。緯度と経度を変数に代入し、それを元にマーカーを設置する最後にSECTION1で作成したinitialize()関数内の末尾にcurrentLocation()関数を起動させる記述を追記(03)すれば、SECTION1で作成した地図内に現在地をマーキングした地図が完成する(04)。現在地は地図で中心には表示されないので、目的地と遠い場所にいる場合はピンチアウトで地図を縮小して確認しよう。目的地と現在地にマーカーが表示される。目的地表示後に現在地情報を取得する(04)現在地をより正確に取得するには?この例ではgetCurrentPosition()メソッドを用いて一度だけ位置情報を取得し、現在地を表示させているが、取得した位置情報の精度が悪いと、時には数百mもの誤差が生じてしまう。APIの位置情報取得のもう1つのメソッドであるwatchPosition()メソッドの利用が挙げられる。watchPosition()メソッドは、一度だけ取得するgetCurrentPosition()メソッドとは違い、継続的に位置情報を取得し続ける。位置情報の中には、緯度・経度の誤差の値が含まれているので、この値が指定した値以下になるまで取得し続ければ、より信頼性の高い現在地情報が取得できる。この場合、通信速度が悪い環境では正確な位置情報の取得まで時間がかかる場合があるので、タイムアウトの処理をしておく必要がある。現在地から目的地までのルートを表示させようここまでで目的地と現在地の2点の位置情報を取得した。今回の案内マップでは、現在地から目的地までどのような道筋をたどっていけばよいのか、この2点間を結ぶルートを表示させてみよう。APIルートサービス」を利用して取得する。準備SECTION2で作成したスクリプトを利用してルートを作成するが、ルートを表示させた場合、現在地点と目的地点の両方に自動的にマーカーが補完される。そのため今回はデフォルトのマーカーは不要になるので、記述を削除しておこう(01)。01マーカーの削除ここではわかりやすいように通常のマーカー(01、02)を削除する。基本的なコードは変わらないが、ルート表示用の記述を多少加えているJavaScriptの記述01のスクリプトに記述を加えていく(02)。APIルートサービス」を利用するために「DirectionsServiceオブジェクト」を、ルート結果を地図上に表示するために「DirectionsRendererオブジェクト」を使用する。03と04は、この2つのオブジェクトを作成している。05でルートを表示する地図を指定する。今回は直前で定義している「map」にルートを表示する。ルートには目的地と現在地の緯度・経度が必要なので、06で目的地の緯度・経度を引数にして現在地を取得するcurrentLocation関数を実行する。現在地の緯度・経度を引数にして、ルートを表示させるcalcRoute関数を実行する(07)ルートを表示させる関数は、03のように記述する。この中でカスタマイズが必要なのは、request内の値だ。「origin」は出発地点、「destination」は到着地点、「travelMode」は交通手段を指定する。今回は現在地を出発点(08)とし、目的地である新宿駅を到着地点(09)、交通手段は徒歩(10)を指定した。Reserved.特定商取引法に基づく表示プライバシーポリシーサイトマップ。