Geolocation APIでPCやスマホの位置情報を取得する #JavaScript

最初に

Geolocation APIを使用してPCやスマホで位置情報を取得するサンプルを作りました。

Geolocation API とは

ユーザーの位置情報を扱うためのAPIで、昔は各キャリアで別々の規格になっていたものを標準化したものらしいです。
これを使うことで各キャリアのスマホもPCも対応ブラウザであれば同じ書き方で位置情報を扱える、ということです。
位置情報を扱うサイトでは、このGeolocation APIを使用しているようです。

サンプル

以下のファイルをサーバーに置いてPCやスマホでアクセスしてください。
画面のボタンを押すと緯度・経度が表示されます。(位置情報へのアクセスは許可しておいてください)
※一部のブラウザではHTTPSでアクセスしないと位置情報が取得できないようです

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>位置情報取得サンプル</title>

  <script>
    // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }

    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
  </script>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <button onclick="getPosition();">位置情報を取得する</button>
</body>
</html>

解説

Geolocation API にアクセスするには navigator.geolocation オブジェクトを使用します。
navigator.geolocation オブジェクトが存在しない場合は Geolocation API に対応していないということになります。
このサンプルでは、ページの描画時にアラートで表示するようにしています。

// Geolocation APIに対応している
if (navigator.geolocation) {
  alert("この端末では位置情報が取得できます");
// Geolocation APIに対応していない
} else {
  alert("この端末では位置情報が取得できません");
}

このサンプルでは、ページに表示されたボタンを押すと、関数 getPosition() が実行され現在地の緯度・経度が表示されるようになっています。
この際、現在地を取得するために Google API の getCurrentPosition() メソッドを使います。
getCurrentPosition() は実行したタイミングに一度だけ位置情報を取得するメソッドです。

// 現在地を取得
navigator.geolocation.getCurrentPosition(
    (中略)
);

getCurrentPosition() の第一引数には取得成功した場合に実行する関数を指定します。
この関数には、位置情報が格納されたオブジェクトが引数として渡されます。ここでは position としています。
position のプロパティを参照することで緯度や経度などの情報を取得することができます。

  // 取得成功した場合
  function(position) {
      alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
  },

getCurrentPosition() の第二引数には取得失敗した場合に実行する関数を指定します。
この関数には、エラー情報が格納されたオブジェクトが引数として渡されます。ここでは error としています。
error.code を参照することでエラーコードを取得することができます。

  // 取得失敗した場合
  function(error) {
    switch(error.code) {
      case 1: //PERMISSION_DENIED
        alert("位置情報の利用が許可されていません");
        break;
      case 2: //POSITION_UNAVAILABLE
        alert("現在位置が取得できませんでした");
        break;
      case 3: //TIMEOUT
        alert("タイムアウトになりました");
        break;
      default:
        alert("その他のエラー(エラーコード:"+error.code+")");
        break;
    }
  }

ちなみに getCurrentPosition() には第三引数を渡すことで、タイムアウト時間などのオプションを設定することもできるようです。今回は省略しています。

補足

エラーコードについて、「1: PERMISSION_DENIED」は位置情報取得を許可しなかった場合、「2: POSITION_UNAVAILABLE」はHTTPSで接続が必要なブラウザでHTTPで接続した場合などに返されるようです。