HTML5 Geolocation（地理定位）

HTML5のGeolocation APIは、ユーザーの位置を特定するために使用されます。

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーの同意がなければ位置情報は利用できません。

位置データの取得

HTML5 Geolocation APIは、ユーザーの地理位置を取得するために使用されます。以下はサンプルスクリプトです:

<p id="demo">ボタンをクリックして現在の座標を取得します (取得には時間がかかる場合があります)。</p>
<button onclick="getLocation()">クリックしてください</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML="このブラウザは位置情報を取得できません。";
    }
}

function showPosition(position) {
    x.innerHTML="緯度: " + position.coords.latitude + "経度: " + position.coords.longitude;
}
</script>

HTML5 地理位置情報

ブラウザのサポート

以下のブラウザがGeolocation APIをサポートしています:

Internet Explorer 9以上
Firefox
Opera
Google Chrome
Safari

また、GPS機能を備えたデバイス（例：iPhone）では、位置情報の精度が高くなります。

エラー処理と拒否

位置情報の取得に失敗した場合、エラーを処理するための関数を指定することができます:


function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML="ユーザーが位置情報の取得を拒否しました。";
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置情報を利用できません。";
            break;
        case error.TIMEOUT:
            x.innerHTML="位置情報のリクエストがタイムアウトしました。";
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知のエラーが発生しました。";
            break;
    }
}

地図への表示

以下の例では、Google Mapの静的イメージを使用して位置情報を地図上に表示します:


function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

位置情報の属性

位置情報データには複数の属性があります。主な属性は以下の通りです:

属性	説明
coords.latitude	緯度（十進数）
coords.longitude	経度（十進数）
coords.accuracy	位置精度
coords.altitude	海抜（メートル）
coords.altitudeAccuracy	海抜の精度
coords.heading	方角（北からの度数）
coords.speed	速度（メートル/秒）
timestamp	レスポンスの日時

他の便利なメソッド

watchPosition() - ユーザーの現在位置を返し、その後も位置が更新される都度通知されます。

clearWatch() - watchPosition()メソッドを停止します。

<body>
<p id="demo">ボタンをクリックして現在の座標を取得します (取得には時間がかかる場合があります)。</p>
<button onclick="getLocation()">クリックしてください</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML="このブラウザは位置情報を取得できません。";
    }
}

function showPosition(position) {
    x.innerHTML="緯度: " + position.coords.latitude + "経度:" + position.coords.longitude;
}
</script>	
</body>

FAQ

Geolocation APIを使用するためにユーザーの許可は必要ですか？

はい、Geolocation APIを使用するためにはユーザーの明示的な許可が必要です。

すべてのブラウザでGeolocation APIがサポートされていますか？

いいえ、古いバージョンのブラウザや一部のブラウザではサポートされていないことがあります。

Geolocation APIを使用するのに追加のプラグインは必要ですか？

いいえ、Geolocation APIはHTML5標準の一部であり、ブラウザがサポートしている限り、追加のプラグインは不要です。