JavaScript

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>
<!-- Google Map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- Google Map -->
<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>

こんな感じで位置情報を取得して地図表示は可能です。

 

Google Mapについては今回は説明しないので、↓こちらを参考にしてください。
[ Google Maps API Ver.3 で地図を表示 ]

 

 

あと、

Geolocation APIについてはこの辺のサイトなんかを参考にすると良いと思います。

http://gihyo.jp/dev/feature/01/location-based-services/0003

 

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. レンタルサーバ:おすすめの共用サーバ
  2. ホームページ(homepage)
  3. システムアップデート
  4. エックスサーバー(XSERVER)
  5. エックスサーバー(XSERVER)
  6. エックスサーバー(XSERVER)
  7. WEBサイト構築
  8. スパム(SPAM)対策
  9. サイト公開
  10. ネームサーバーの登録

Twitter

ダッチ(足立拓也)
@gatsu0000

アーカイブ

PAGE TOP