ブラウザで位置情報を取得する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 で、このページで地図を表示する事ができた。が、これはどこを表示しているのだろう?