AOSC勉強会 google map

先週の話ですが、旭川オープンソースコミュニティの勉強会で「google map」について話がありました。
その中で、iphoneから緯度経度を取得する方法について聞いてみたのですが、わからないとのことでしたので調べてみました。

まぁ、調べたと言うか、検索しただけですが。

html5のGeolocation APIを使うとイイ！

　サンプルが転がってるだろう、ということで、Google Maps API Referenceのデモギャラリーを探してみたところ、案の定あっさりでてきました。

位置情報の取得

　デモのソースを見てみると、下記コードで緯度経度を取得していそうです。

抜粋
[javascript]
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
} else {
positionError(-1);
}
[/javascript]

navigator.geolocationとは

　上記コードで使われている「navigator.geolocation」はHTML5のGeolocation APIです。
　　-> Geolocation API Specification
　HTML5なので、ブラウザが実装していなければ動作しませんが、主要ブラウザは実装済みのようです。
　-> 位置情報をブラウザで活用！ Geolocationを使いこなそう－＠IT
　スマートフォンではない携帯では、「位置情報・GPS情報の取得方法 – [携帯 + 携帯] ぺんたん info」に書かれている方法で取得できるようです。

サンプルを作ってみる

　簡単なサンプルをGAEで作ってみました。
　位置を取得してマーカーを追加していくだけのものです。
　GAEにデプロイしてiphoneでアクセスすると、マーカーがどんどん追加されることが確認できました。
　ちなみにGAEで作った意味はとくにありません。普通にサーバーに置いてよいと思います。

-> google map sample
-> source:planset/google_map_sample – GitHub

index.html
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>google map sample</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

var gmap = null;

function createMap() {
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function updateLocation(pos) {
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

if (gmap == null){
gmap = createMap(latlng);
} else {
var marker = new google.maps.Marker({
position: latlng
});
marker.setMap(gmap);
gmap.setCenter(latlng);
}
}

function handleError(a) {
alert("error: " + a.code + "");
}

window.onload = function(){
if (navigator.geolocation) {
var options = {
timeout: 10000
};
navigator.geolocation.watchPosition(updateLocation, handleError, options);
}
};

</script>
<style type="text/css">

html, body { height: 100%; margin: 0; padding: 0; }
#map_canvas { width: 100%; height:100%; }

</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

[/html]

html5のGeolocation APIを使うとイイ！

位置情報の取得

navigator.geolocationとは

サンプルを作ってみる

参考：Google Maps JavaScript API V3