GPSが使える！となれば、誰もがまず思い浮かぶのは「Googleマップとの連携」でしょう。では、実際にGPSから現在位置を取得し、Googleマップに表示するサンプルを挙げておきましょう。

ここでは、ざっと全体の流れを説明しておきます。まず、ページにアクセスしたら、doActionでGPSアクセスを開始します。そして、成功時のコールバック関数getPosition内で、緯度と経度の値を取り出したら、それらを引数に指定してinitMap関数を呼び出します。

このinitMapで、マップの作成と設定を行なっています。まず、位置の値を元にLatLngオブジェクトを作成します。

var latlng = new google.maps.LatLng(lat,lng);

続いて、マップの作成です。あらかじめ表示設定を連想配列としてまとめておき、それを元にしてgoogle.maps.Mapオブジェクトを作成します。

var options = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(element,options);

続いて、現在地点にマーカーを作成します。これも、あらかじめ表示に関する設定情報を連想配列にまとめておき、google.maps.Markerオブジェクトを作成します。

var options = {
    position: latlng,
    map: map,
    title: "現在位置"
};
var marker = new google.maps.Marker(options);

そして、情報ウインドウの作成と表示です。やはり表示メッセージなどの情報を連想配列にまとめ、google.maps.InfoWindowを作成します。そして、openを呼び出してウインドウを画面に表示させておきます。

var info_opt = { content: "現在位置！" };
var info = new google.maps.InfoWindow(info_opt);
info.open(map,marker);

ざっと「マップ」「マーカー」「情報ウインドウ」の３大要素を作成してみました。watchPositionを使えば、移動中に現在地点をマーカーでどんどんマップに追加する、というようなサンプルも作れそうですね。いろいろと応用ができそうです。

※GoogleマップのAPIについては、以下に説明してありますのでこちらを参照ください。

http://libro.tuyano.com/index3?id=84001