JavaScript でスマホの位置情報（GPS）、緯度・経度を取得する

JavaScript でスマホの位置情報（GPS）、緯度・経度を取得する。現在地の表示。geolocation.getCurrentPosition、watchPosition。
対象 ： Android Chrome、iOS（iPhone、iPod touch）Safari

getCurrentPosition - 緯度・経度を取得

スマホの位置（GPS）情報は JavaScript で簡単に取得できる。
ただし、2016年12月現在最新版のChromeやSafariではSSL（https）通信でないと位置情報を取得できない。
古いブラウザはhttpでも取得できた。

<div id="ex_gps"></div>

<script>
window.addEventListener('DOMContentLoaded', function(){
   if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(successFunc, errorFunc);
   }else{
      document.getElementById('ex_gps').insertAdjacentHTML('afterbegin', 'エラー：geolocationを取得できません。');
   }
}, false);

function successFunc(position){
   var crd = position.coords;

   var text = "緯度 latitude：" + crd.latitude + "<br />"
      + "経度 longitude：" + crd.longitude + "<br />"
      + "高度 altitude：" + crd.altitude + "<br />"
      + "水平方向の誤差 accuracy：" + crd.accuracy + "<br />"
      + "垂直方向の誤差 altitudeAccuracy：" + crd.altitudeAccuracy + "<br />"
      + "方向 heading：" + crd.heading + "<br />"
      + "速度 speed：" + crd.speed
      ;

   document.getElementById('ex_gps').innerHTML = text;
}

function errorFunc(error){
   document.getElementById('ex_gps').innerHTML = "エラーコード：" + error.code + "<br />エラー内容：" + error.message;
}
</script>

このサンプルコードは、getCurrentPositionで位置情報を取得できたらsuccessFunc関数、エラーの場合はerrorFunc関数を実行している。
取得できる情報は以下の通り。

• latitude ： 緯度
• longitude ： 経度
• altitude ： 高度
• accuracy ： 水平方向の誤差
• altitudeAccuracy ： 垂直方向の誤差
• heading ： 方向
• speed ： 速度

取得できる情報はデバイスしだいで、取得できない場合は null になる。
基本的にGPS内蔵のスマホであれば緯度と経度は取得できる。
GPSを内蔵していないデバイスでは、ブラウザがIPアドレスなどをもとに大まかな位置情報を表示する場合もある。
Googleマップを使えば現在地を表示することもできる。
GoogleマップのAPIはいろいろあるが、通常の地図検索と同様クエリ（q）に緯度、経度をカンマで区切った値（35.658611,139.745556 など）を付けて検索するとその場所が表示される。

watchPosition - 位置情報を定期的に取得

前述の getCurrentPosition は位置情報を1度だけ取得するが、watchPosition はデバイスの位置が変化するたびに位置情報を取得してくれる。
よって setInterval 等は使わなくても良い。
前述のコードの getCurrentPosition を watchPosition に変えるだけで良い。

window.addEventListener('load', function(){
   if(navigator.geolocation){
      navigator.geolocation.watchPosition(successFunc, errorFunc);
   }else{
      document.getElementById('ex_gps').insertAdjacentHTML('afterbegin', 'エラー：geolocationを取得できません。');
   }
}, false);

successFunc関数では、一度位置情報を表示するだけなら insertAdjacentHTML で良いが、情報を更新できるように予め innerHTML を使用している。
位置情報の詳しい話は Mozilla Developer Network（MDN）の Geolocation に書かれている。