こんにちは、サンプルアプリ開発者の山田健一です。
今回はGPSにより取得した緯度、経度から住所を求め、さらに地図を表示するサンプルについて解説します。
住所取得、地図表示、どちらも Google Maps API を利用します。
Google Maps API を利用するためには、htmlに次のコードを追加します。
Google Maps API の指定
これだけの指定でGoogle Maps API が使用できるようになりますが、sensorパラメーターは必ず指定してください。地図を表示するにあたり、GPSのよaうな位置情報を使用するか否かの指定です。今回はGPSを使用しますが、GPSを利用して地図を表z示するのではなく、GPSから取得したデータを厳選した上で、そのデータをもとに地図表示を行うため、 false を指定します。
GPSから取得したデータには誤差が含まれるため、一定時間計測を行い、その中で一番少ない誤差のデータを採用する、また誤差データが指定した値以下なら、経過時間に関わらず、即採用するというロジックを組み立てます。
このロジックは正確性と迅速性を両立できるロジックになります。
本サンプルでは、地図表示に重点が置かれているため、誤差が大きくても位置情報が取得できた場合は、最小誤差のデータを採用するロジックになっていますが、アプリの性格から正確性を重要視する場合は、指定した誤差以下の測定データが得られなかった場合、「測定できませんでした」とすることも考慮してください。
また、地図を表示する領域は予め確保する必要があります。
今回は次のコードで地図を表示する領域を確保します。
地図の表示領域の確保
Google Maps APIではサイズをコンテナ要素から取得するため、明示的にサイズを設定する必要があります。
GPSを利用して位置情報を取得するコードは次のようになります（一部省略しています）。
位置情報取得のコード
GPSについては前回の記事を参考にしてください。
住所取得のコードは次のようになります。
latに緯度、lonに経度が入っています。
住所取得のコード
最初にコールバック関数を定義しておき、緯度経度オブジェクト（latlng）を生成し、
[code]geocoder.geocode({latLng: latlng}, onSuccessGeo);[/code]
というコードで住所を取得します。結果はコールバック関数であるonSuccessGeo関数が受け取ります。
status が google.maps.GeocoderStatus.OK であることを確認します。
results は配列形式で返されますが、0番目の要素を採用します。
results[0].geometry の存在を確認し、results[0].formatted_address を住所として採用します。
GPSの位置データには誤差もあるため、誤差も含めて表示するようにしています。
次に地図表示です。これも比較的簡単なコードで実現できます。地図の中心点にマーカーも表示するコードです。
地図表示のコード
GPS再計測の際、古い地図を非表示にしていますので、先に地図領域を表示に設定し直します。
生成した緯度経度オブジェクト（latlng）を中心として地図を描画します。
中心地にはマーカーを書きます。
このようにして作成した地図は次のようになります。
住所と地図の表示
［航空写真］ボタンをタップすると次のように地図が衛生画像に置き換わります。
衛生画像表示
mapTypeIdの指定をgoogle.maps.MapTypeId.SATELLITEに指定し直すことで初めから衛生画像で表示させることができます。
mapTypeIdの指定は次の4種類があります。
MapTypeId.ROADMAP は通常のマップビューを表示します。
MapTypeId.SATELLITE はGoogle Earth の衛星画像を表示します。
MapTypeId.HYBRID は通常と衛星画像の統合された画像を表示します。
MapTypeId.TERRAIN は、地図的な情報に基づいて、物理的な地図を表示します。
好みのものを使ってください。
ライブラリーとして、iUI,zeptoを使用していますが、上記のソースには含んでいませんので、別途ダウンロードをお願いします。
iUIは次からダウンロードできます。
http://www.iui-js.org/download
zeptoはjQuery互換の軽量版ライブラリーです。次からダウンロードできます。
ソースコード、apkファイルは次のリンクからダウンロードできます。