jQuery

ブラウザで位置情報を取得するGeolocation APIを使ってみる

W3Cから、ブラウザで位置情報を取得する Geolocation API 仕様書の草案が公開されている。

どうやら JavaScript を使って、 GPS 機能があるデバイスから位置情報が取り出せる仕様のようだ。GPS 機能が無い場合は、IPアドレス、RFID、WiFI や Bluetooth MAC アドレス、GSM/CDMA セル ID などから推定された情報を戻すとの事。この機能を JavaScript の「navigator.geolocation」オブジェクトとして利用できるらしい。

以下、試した内容の備忘録です。Firefox 3.6.8、Chrome 5.0.375.126 で動作しました。IE8はNG。

先ずは位置情報の取得から。プログラムは簡単です。

<html>
<head>
<title>Test Geolocation API</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script type="text/javascript">
$(document).ready(function() {
	var showMap = function(position) {
		// Show a map centered at (position.coords.latitude, position.coords.longitude).
		alert("緯度:" + position.coords.latitude + " 経度:" + position.coords.longitude);
	}

	// One-shot position request.
	navigator.geolocation.getCurrentPosition(showMap);
});
</script>
</head>
<body>
<h1>Test Geolocation API</h1>
</body>
</html>

マウスをソース上に置くと右上にアイコンメニューが表示されるので、コピーしてテキストエディタで test.html として保存、そのままブラウザで指定すれば実行できます。ブラウザを開くと位置情報の許可を求めてくるので許可すると、しばらくしてから位置情報が戻ってくる。

次のボタンで試せます(Firefoxだと表示まで5,6秒時間が掛ります)。
※ ライブラリ内部でエラーが発生して動作しない場合がありました。無線LANルータが原因?

位置情報が取得できるなら Google マップで現在地を表示するなど、アプリケーションへの活用もいろいろできそう。以下戻ってきた位置をマップ上に表示するプログラムです。リンクは、The Google Maps Javascript API V3 のドキュメントです。

<html>
<head>
<title>Test Geolocation API</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=ja"></script>
<script type="text/javascript">
$(document).ready(function() {
	var showMap = function(position) {
		var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		var options = {
			zoom: 16,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map($("#map_canvas").get(0), options);
		var marker = new google.maps.Marker({
						map: map,
						position: latlng
					});
	}

	$("#abtn").click(function() {
		navigator.geolocation.getCurrentPosition(showMap);
		return false;
	});
});
</script>
</head>
<body>
<h1>Test Geolocation API</h1>
<p><input type="button" id="abtn" value="現在地表示" /></p>
<div id="map_canvas" style="width:480px; height:400px;"></div>
</body>
</html>

以下のボタンを押すと、実際に地図と現在地を表示します。

いかがでしたか?

iPhone 3GS 4.0.2 の Safari で、このページで地図を表示する事ができた。が、これはどこを表示しているのだろう?