Geolocation APIとは

HTML5から導入された位置情報を取得するAPIです。
これまでも位置情報を取得することは可能でしたが各端末のキャリアによって仕様が異なりました。
このAPIを使えばjavascriptでどの端末でも共通の指定で位置情報を取得することが可能です。
　
　

Geolocation APIで取得した位置情報をGoogle Maps APIに渡してGoogle Mapで表示してみる

See the Pen Geolocation APIを使って現在位置をGoogle Mapで表示 by tetsuro ebata (@ebatetsu) on CodePen.0

解説

ボタンがクリックされたらGeolocation APIに対応しているかチェックし、
対応していた場合にメソッドを使って処理を書いていきます。
引数の指定は以下の通りです。

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(
    success, // 成功したた際の処理
    error, // 失敗した際の処理
    option // オプション
  );
}
else{
  alert('Geolocation APIに対応していません');
}

今回はgetCurrentPosition() を使用していますが、3つのメソッドがあります。

• getCurrentPosition()
  ユーザーの現在の位置情報を一回だけ取得する

• watchPosition()
  ユーザーの位置情報を定期的に監視する

• clearWatch()
  watchPosition()による位置情報の監視をクリアする
  　

オプションはオブジェクト変数にして、以下のような指定をしています。

var option = {
  'enableHighAccuracy': true, // より精度の高い位置情報を取得するか
  'timeout': 10000, // 取得タイムアウトまでの時間（ミリ秒）
  'maximumAge': 0 // 位置情報の有効期限（ミリ秒）
};

補足

• enableHighAccuracy
  trueにすることで精度の高い位置情報を取得できますが、取得時間が長くなります。

• timeout
  指定した秒数内に取得できなければerrorの処理に移行します。

• maximumAge
  0にすることでキャッシュした位置情報は使用せず毎回新たな位置情報を取得します。
  　

位置の取得に成功すると位置情報などが下りてくるので以下の記述で緯度、経度を取得します。

position.coords.latitude, // 緯度
position.coords.longitude // 経度

あとはGoogle Maps APIでMapを表示するだけです。（最後雑）