【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (11) Geolocation API | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【特集】

詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編

11 Geolocation API

白石俊平　 [2009/08/17]

印刷

先頭
前へ
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- ／11

最後に紹介するのは、プログラムが実行されている位置の情報を取得することができるGeolocation APIだ。

Geolocation APIは、window.navigatorオブジェクトに新しく追加された「geolocation」プロパティにアクセスすることで利用できる。同プロパティを通じて呼び出せるメソッドは以下の3つしかない。

void getCurrentPosition(onSuccess, onError, options) … 現在位置を取得する
int watchPosition(onSuccess, onError, options) … 位置情報を継続して監視する
void clearWatch(watchId) … 位置情報の監視をやめる。引数はwatchPosition()を呼び出した際に得られる戻り値

getCurrentPosition()とwatchPosition()は、どちらも第1引数以外省略することができる。なので、以下のような非常にシンプルなコードで位置情報を取得することが可能だ。

navigator.geolocation.getCurrentPosition(function(position) {
   // 現在位置を用いたコード
});

また、getCurrentPosition()/watchPosition()の第3引数として渡すことのできるオプションには以下のようなものがある。

enableHighAccuracy … 正確性の高い位置情報を要求する
timeout … 位置情報の取得に時間制限を設ける(ミリ秒)。時間制限を過ぎるとエラーとなる
maximumAge … キャッシュされた位置情報の有効期間を指定する(ミリ秒)。この期限を過ぎた位置情報は破棄され、新しい位置情報の取得が試行される。ゼロを指定すると、無条件で新しい位置情報の取得が行われる。

これらのオプションを指定した例を以下に示す。

navigator.geolocation.getCurrentPosition(
  function(position) {
    // 位置情報取得に成功した場合の処理
  },
  function(error) {
    // 位置情報取得に失敗した場合の処理
  },
  // 以下がオプション
  {
    // 1分以内に取得した位置情報のみ使用する
    maximumAge: 60 * 1000,
    // 5秒以内に取得できなかったらエラー  
    timeout: 5000
  }
);

位置情報の取得に成功すると、コールバック関数にPositionオブジェクトが渡される。Positionオブジェクトは以下のようなプロパティを持つ。

coords … 位置情報が格納されたオブジェクト。このオブジェクトに格納されている情報は以下のようなものがある。
- latitude … 緯度
- longitude … 経度
- altitude … 標高(利用できない場合はnull)
- accuracy … 緯度/経度の正確さ(メートル単位)
- altitudeAccuracy … 標高の正確さ(メートル単位)
- heading … デバイスの進行方向。真北に対する時計回りの角度で表される。利用できない場合はnull
- speed … デバイスの進行速度(メートル/秒)。利用できない場合はnull
timestamp … 位置情報が取得された時刻

サンプル

以下のサンプルは、Geolocationで取得した現在位置の情報をGoogle Mapsで表示するものだ。Google Maps APIはバージョン3を用いている。

Geolocationによるサンプル

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function init() {
    // 現在位置を取得
    navigator.geolocation.getCurrentPosition(function(position) {
        var coords = position.coords;
        // 取得した現在位置で、Google Mapsの緯度経度情報を生成
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // マップを生成
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        // 地図にマーカーをつける
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        var infowindow = new google.maps.InfoWindow({
          content: "イマココ!"
        });
        infowindow.open(map, marker);
    });
  }
</script>
</head>
<body onload="init()">
  <div id="map" style="width:400px; height:400px"></div>
</body>
</html>

ただ、筆者のWi-Fi環境で上記のサンプルを試すと、現在の位置は皇居内であると示されてしまった。同様の現象は多々報告されているようなので、サンプルが悪いわけではないようだ。