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. GoogleMap(グーグルマップ)

    Javascript

    Google Map APIを使うのは止めました!

    Google Map(グーグル マップ)は、APIキー無し、無…

  2. JavaScript

    Javascript

    IE10でLightboxが。。。

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

  3. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

  4. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

  5. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  6. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

    前回の記事では、「jQuery ui Datepicker」の設定…

最近の記事

  1. WordPressのセキュリティ対策(脆弱性対策)
  2. ドメイン失効
  3. SEO関連タグ
  4. SEO関連タグ
  5. レンタルサーバー(共用サーバー)
  6. システム開発用のアイキャッチ
  7. システム開発用のアイキャッチ
  8. ドメイン 利用制限
  9. WP:WordPress(ワードプレス)
  10. システム開発用のアイキャッチ
PAGE TOP