2012.04.24

Geolocation APIを使ってスマホで位置情報取得

iphoneやAndroidのGPSを利用して位置情報を取得したい場合、

getCurrentPositionで簡単に取得できます。

使い方はと言うと、

navigator.geolocation.getCurrentPosition(callbackOk, callbackError);

とするだけ。

callbackOkは位置情報の取得成功時に呼び出されるコールバック関数、
callbackErrorはエラー時に呼び出されるコールバック関数です。

※コールバック関数名は任意です。

あとは、

位置情報の取得に成功していれば、

緯度・経度をそれぞれ「position.coords.longitude」・「position.coords.latitude」へ入れてくれます。

ということで、

勉強がてらGoogleMap Ver3と絡めた簡単なプログラムを組んでみました。

↓こんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<title></title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<style>
#canvas{
width:310px;
height:263px;
margin:0 auto;
padding:0px;
text-align:center;
}
</style>

<script>
//ユーザーの現在の位置情報を取得
/*
* callbackOk：位置情報取得成功時のコールバック関数
* callbackError：位置情報取得失敗時のコールバック関数
*/
navigator.geolocation.getCurrentPosition(callbackOk, callbackError);

//位置情報の取得に成功した場合
function callbackOk(position){

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var opts = {
  zoom: 12,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("canvas"), opts);

//マーカー　指定の座標に設置
var marker = new google.maps.Marker({position: latlng, map: map});

}

//位置情報の取得に失敗した場合
function callbackError(error){

var error_message = "";

switch(error.code){

case 1:
  error_message = "位置情報の取得が許可されていません。";
  break;

case 2:
  error_message = "端末の位置情報が利用できません。";
  break;

case 3:
  error_message = "タイムアウトしました。";
  break;

}

document.getElementById("canvas").innerHTML = error_message;

}

</script>

</head>
<body>
<article id="conts">
<div id="canvas"></div>
</article>
</body>
</html>