Geolocation APIを使ってみた(その1）

  • 投稿日:
  • by 壱
  • カテゴリ:

HTML5の仕様策定が進むのに伴って、関連の各種APIも仕様が決められ、各Webブラウザの実装も進みつつあります。
それらのAPIの中の1つに、現在位置の情報を取得する「Geolocation API」があります。
このGeolocation APIを使ってみたので、使い方をまとめます。

1.getCurrentPosition関数

Geolocation APIは、Geolocationオブジェクトを介して利用します。
Geolocationオブジェクトは、Navigatorオブジェクトのgeolocationプロパティ（navigator.geolocation）で得ることができます。

現在位置を取得するには、Geolocationオブジェクトの「getCurrentPosition」というメソッドを実行します。
基本的には、このメソッドのパラメータとして、2つのコールバック関数を渡します。

1つ目のパラメータは、位置を取得できた時に実行するコールバック関数です。
このコールバック関数には、位置情報を表すオブジェクトが渡されます。
オブジェクトには以下のようなプロパティがあります。

プロパティ内容
coords.latitude現在地の緯度
coords.longitude現在地の経度
timestamp位置を取得した時刻のタイムスタンプ

また、2つ目のパラメータは、位置の取得に失敗した時に実行するコールバック関数です。
このコールバック関数には、エラーの情報を表すオブジェクトが渡されます。
オブジェクトには以下のようなプロパティがあります。

プロパティ内容
codeエラーコード
messageエラーメッセージ

上記のことから、基本的には以下のようなJavaScriptで位置情報を取得して処理します。 

navigator.geolocation.getCurrentPosition(showMap, showError);

function showMap(position) {
    // position.coord.latitudeが緯度を表す
    // position.coord.longitudeが緯度を表す
    // これらの値を使って、現在地に関する何らかの処理を行う
}

function showError(error) {
    // error.codeがエラーコードを表す
    // error.messageがエラーメッセージを表す
    // これらの値を元に、エラーメッセージを表示するなどの処理を行う
}

2.現在地の地図をGoogleマップで表示する

Geolocation APIを使った簡単な例として、現在地の地図をGoogleマップで表示するプログラムを作ってみました。
IDが「geo」のdiv要素に、Googleマップを表示するようにします。

HTML側は以下の通りです。
Webブラウザのウィンドウいっぱいに、IDが「geo」のdiv要素を表示するようにしています。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Geolocation</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
<style type="text/css">
* { margin : 0; padding : 0 }
body, html { height : 100%; }
#geo { width : 100%; height : 100%; }
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="./geo.js"></script>
<div id="geo">地図を読み込んでいます</div>
</body>
</html>

また、JavaScript側は以下の通りです。

27行目でgetCurrentPositionメソッドを実行し、現在地を取得しています。
そして、取得に成功した場合は、1～18行目のshowMap関数が実行されます。

showMap関数では、パラメータを「position」という変数に代入しています。
したがって、position.coord.latitude／position.coord.longitudeで、現在地の緯度／経度を得ることができます。
これらの値から、11行目で現在地を表すGoogleマップのLatLngオブジェクトを生成しています。
そして、12行目でGoogleマップの中心を現在地に合わせています。 

function showMap(position) {
    var myOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
    };
    var mapdiv = document.getElementById("geo");

    var map = new google.maps.Map(mapdiv, myOptions);
    var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(center);
    var marker = new google.maps.Marker({
        position: center, 
        map: map, 
        title: '現在地'
    });
}

function showError(error) {
    document.getElementById('geo').innerHTML = 'Geolocation Error : ' + error.message;
}

if (window.addEventListener) {
    window.addEventListener('load', function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showMap, showError);
        }
        else {
            alert('お使いのWebブラウザはGeoLocation APIに対応していません。');
            showMap({ coords : { latitude : 35.681382, longitude : 139.766084 }});
        }
    }, false);
}
else {
    window.attachEvent('onload', function() {
        alert('お使いのWebブラウザはGeoLocation APIに対応していません。');
        showMap({ coords : { latitude : 35.681382, longitude : 139.766084 }});
    });
}

3.動作例

上記のJavaScriptを若干修正して、この記事の上で動作するようにしたサンプルを、以下に入れておきました。
Geolocation APIに対応したWebブラウザをお使いの場合は、「ここをクリックすると地図を表示します。」のリンクをクリックすると、現在地の地図が表示されます。