旭川オープンソースコミュニティの勉強会を
本日５月２３日 １８：３０〜１９：３０くらいまで
まちこみゅでゆる〜くやります。
現在はもちまわりで何か興味あることなどを発表しているのですが、今回は私がその担当です。
内容はSwiftについてと、時間があればウェブカメラ＋motion(動体検知)＋Swift＋arduinoというアホなのを紹介します。
旭川近郊でIT関係に興味のある方でお時間に都合の付く方がおられましたら、
是非是非お越しくださいませ。
詳しくはこちらから。
タグ: aosc
AOSC勉強会 google map
先週の話ですが、旭川オープンソースコミュニティの勉強会で「google map」について話がありました。
その中で、iphoneから緯度経度を取得する方法について聞いてみたのですが、わからないとのことでしたので調べてみました。
まぁ、調べたと言うか、検索しただけですが。
html5のGeolocation APIを使うとイイ！
サンプルが転がってるだろう、ということで、Google Maps API Referenceのデモギャラリーを探してみたところ、案の定あっさりでてきました。
-> Where Am I?
位置情報の取得
デモのソースを見てみると、下記コードで緯度経度を取得していそうです。
抜粋
[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]