WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

JavaScript(jQuery)でGPS位置情報を取得してみる

最近ではアプリなどで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]
◆HTML


[/html]

SCRIPTは今回はjQueryベースで作っているので
別途jQueryファイルも必要です。

[javascript]
◆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;
}
});
}
}
);
});
});
[/javascript]

「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位置情報を扱ってみる

サンプルファイルをダウンロードしたい方はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です