最近ではアプリなどで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位置情報を扱ってみる

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR