2012/04/11更新

[HTML5] GeoLocation API（位置情報取得機能）を試してみた！Google Mapとの連携も。

今日は、HTML5の位置情報を取得するGeolocation APIについてブログに書きたいと思います。
Geolocation APIの利用可否のチェック、現在位置の取得、位置取得失敗時の振る舞いの指定、Google Mapでの現在地表示など色々と試してみました。
全てソースコードを掲載(*´∇｀*)

GeoLocation APIのイメージ図

Webページで位置情報を取得するには

Webページで位置情報を取得するには何個か方法はあるんだろうと思いますが、今回はHTML5のGeoLocation APIを利用しました。このAPIは流石はHTML5の関連機能なだけあって、とても使い方が簡単(*´∇｀*)すぐに使うことが出来ました。

GeoLocation APIが利用可能であるかを調べる

スマートフォンやパソコンのブラウザにおいてGeoLocation APIが利用出来るかどうかは、以下のように調べることが出来ます。

function checkGeoAvailable(){
  return !(navigator.geolocation == undefined);
}

navigatorオブジェクトにgeolocationプロパティが存在するかどうかで、GeoLocation APIが利用出来るかどうかを判別出来ます。

位置情報を取得する

位置情報を取得するには、以下のメソッドを利用します。

navigator.geolocation.getCurrentPosition(
    処理成功時のコールバック関数, 
    処理失敗時のコールバック関数
);

getCurrentPositionメソッドを利用する事で、今居る地点に関する情報を1度取得する事が出来ます。ユーザーは、「位置情報取得してよいか？」とブラウザから問われますので、「いいよ～」と答えると、機能が動きます。

処理成功時のコールバック関数

例えば以下のような処理を記述します。取得した情報を表示する処理です。

var successFunc = function(position){
  alert("位置情報の取得に成功しました");
  var status = "";
  for (var prop in position.coords) {
    status += prop + ": " + position.coords[prop] + "<br>";
  }
  status += "<a href='http://maps.google.co.jp/?q="
    + position.coords.latitude + "," 
    + position.coords.longitude 
    + "' target='blank'>GoogleMapで現在地を表示する</a><br>";
  document.getElementById("statusArea").innerHTML = status;
}

コールバック関数の引数にpositionを指定する事で、この引数の中に色々な位置情報が格納されています。

位置情報プロパティ	意味
position.coords.speed	スピード
position.coords.accuracy	位置精度
position.coords.altitudeAccuracy	高度精度
position.coords.altitude	高度
position.coords.longitude	経度
position.coords.latitude	緯度

また、「http://maps.google.co.jp/q=latitude,longitude」のURLを指定することで、GoogleMapで取得した位置を表示するリンクも作成してみました。

処理失敗時のコールバック関数

位置情報取得に失敗した場合には、例えば以下のような処理をします。

var failureFunc = function(err){
  var errCause = "";
  switch(err.code) {
    case err.TIMEOUT:
      errCause = 'Timeout';
      break;
    case err.POSITION_UNAVAILABLE:
      errCause = 'Position unavailable';
      break;
    case err.PERMISSION_DENIED:
      errCause = 'Permission denied';
      break;
    case err.UNKNOWN_ERROR:
      errCause = 'Unknown error';
      break;
  }
  alert("位置情報取得に失敗しました。"
    + "原因: " + errCause + " " + err.message);
}

コールバック関数の引数errにエラーに関する情報が格納されています。err.Codeがエラーコード、err.messageがエラーメッセージです。

位置情報取得のサンプル画面は以下となります。

http://www.yoheim.net/labo/html5/geo.php

最後に

位置情報取得したら、次はGoogleMapとの連携を行ってみたいですね。地図も自由に表現出来るようになると、Webページに更なる面白みを加えられそうです。