最近ではアプリなどでGPSを使った位置情報の取得する機能をよく見かけますが
JavaScriptを使ってそのようなGPS位置情報を利用するサンプルを作ってみたので紹介してみます。
JavaScriptでは「Geolocation API」というAPIを使って
「navigator.geolocation」オブジェクトで位置情報を扱うようです。
位置情報取得の際には
position.coords.latitude：緯度
position.coords.longitude：経度
となります。
これを使って位置情報を取得するサンプルは以下から。
画面上の「≫GPS情報取得を開始する」をクリックすると位置情報の取得を開始します。
jQuery GPS
別枠表示したい場合は以下から。
≫jQuery GPS
画面上の「≫GPS情報取得を開始する」をクリックすると
現在地の緯度／経度に加えて、Googleマップで現在の位置にマーカーを立てます。
PCは基本的にGPS機能を持っていないので
正確な位置情報を取得できないことがありますが
スマートフォンなどGPS機能を持っている端末では
正確な位置を取得することが出来ると思います。
このサンプルの構成については
以下のようになっています。
◆HTML <div id="contents"> <a href="javascript:void(0);" id="start_gps">≫GPS情報取得を開始する</a> <table> <tr> <th>緯度</th> <td><span id="latitude"></span></td> <th>経度</th> <td><span id="longitude"></span></td> </tr> </table> <div id="map"><p>MAP</p></div> </div><!--/contents-->
SCRIPTは今回はjQueryベースで作っているので
別途jQueryファイルも必要です。
◆SCRIPT
$(function(){
$('#start_gps').click(function(){
navigator.geolocation.watchPosition(
function(position){
$('#latitude').html(position.coords.latitude); //緯度
$('#longitude').html(position.coords.longitude); //経度
//GoogleMapLOAD
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var latlng = new GLatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(latlng, 14, G_NORMAL_MAP);
var marker = new GMarker(latlng);
map.addOverlay(marker);
GEvent.addListener(map,'click',function(overlay, point){
if(point){
document.getElementById('click_lat').value = point.y;
document.getElementById('click_long').value = point.x;
}
});
}
}
);
});
});
「Geolocation API」は現在W3Cで仕様を策定中で
FirefoxやGoogle Chrome，Safariでは利用が出来ますが
IEなどのブラウザでは全く動作しません。
Googleマップ表示ではGoogle Maps API KEYを必要としているので
サンプルを他のサーバーにアップして使おうとしても
マップを表示できないことがあるのでご注意ください。
≫Google Maps API KEYについてはこちらから
今回は実験的なサンプルでしたが
アプリなどでGPS位置情報取得する際のご参考までに。。。
【参考記事】
≫位置情報サービスのはじめ方：第3回 位置情報を取得してみよう（後編）｜gihyo.jp … 技術評論社
≫pxt | 【JavaScript】 iPhone で、ウェブからGPS位置情報を扱ってみる