JavaScript

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

 

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    弊社では、物件画像を取り扱うシステムを構築することが多いんです…

  2. JavaScript

    Javascript

    pickadate.js【デートピッカー・タイムピッカー用ライブラリ】

    pickadate.jsについてデートピッカーと言えば、「…

  3. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

  4. JavaScript

    Javascript

    「jQuery ui Datepicker」の基本的な使い方

    先日フォームの作成依頼があった際に、日付欄はユーザーに直接…

  5. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

  6. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

最近の記事

  1. SEO関連タグ
  2. SEO関連タグ
  3. レンタルサーバー(共用サーバー)
  4. システム開発用のアイキャッチ
  5. システム開発用のアイキャッチ
  6. ドメイン 利用制限
  7. WP:WordPress(ワードプレス)
  8. システム開発用のアイキャッチ
  9. システム開発用のアイキャッチ
  10. Theme(テーマ)の選択
PAGE TOP