Web Geolocation API
ユーザーの位置を特定する
HTML Geolocation APIは、ユーザーの地理的位置を取得するために使用されます。
これはプライバシーを危険にさらす可能性があるため、ユーザーが承認しない限り、そのポジションは利用できません。
注： ジオロケーションは、スマートフォンなどのGPSを備えたデバイスで最も正確です。
Geolocation APIは、すべてのブラウザでサポートされています。
| Yes | Yes | Yes | Yes | Yes |
注： Chrome 50以降、GeolocationAPIはHTTPSなどの安全なコンテキストでのみ機能します。サイトが安全でないオリジン（HTTPなど）でホストされている場合、ユーザーの場所を取得するリクエストは機能しなくなります。
GeolocationAPIの使用
このgetCurrentPosition()メソッドは、ユーザーの位置を返すために使用されます。
次の例は、ユーザーの位置の緯度と経度を返します。
例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
説明された例：
- ジオロケーションがサポートされているかどうかを確認する
- サポートされている場合は、getCurrentPosition（）メソッドを実行します。そうでない場合は、ユーザーにメッセージを表示します
- getCurrentPosition（）メソッドが成功すると、パラメーター（showPosition）で指定された関数に座標オブジェクトが返されます。
- showPosition（）関数は、緯度と経度を出力します
上記の例は、エラー処理のない非常に基本的なジオロケーションスクリプトです。
エラーと拒否の処理
メソッドの2番目のパラメーターは、getCurrentPosition()エラーを処理するために使用されます。ユーザーの場所の取得に失敗した場合に実行する関数を指定します。
例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
結果をマップに表示する
結果を地図に表示するには、Googleマップなどの地図サービスにアクセスする必要があります。
以下の例では、返された緯度と経度を使用して、Googleマップに場所を表示します（静止画像を使用）。
例
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
場所固有の情報
このページでは、ユーザーの位置を地図上に表示する方法を示しました。
ジオロケーションは、次のような場所固有の情報にも非常に役立ちます。
- 最新の地域情報
- ユーザーの近くに関心のあるポイントを表示する
- ターンバイターン方式のナビゲーション（GPS）
getCurrentPosition（）メソッド-データを返す
このgetCurrentPosition()メソッドは、成功するとオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。利用可能な場合、他のプロパティが返されます。
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
ジオロケーションオブジェクト-その他の興味深い方法
Geolocationオブジェクトには、他にも興味深いメソッドがあります。
watchPosition()-ユーザーの現在の位置を返し、ユーザーが移動すると（車のGPSのように）更新された位置を返し続けます。clearWatch()-メソッドを停止しますwatchPosition()。
以下の例はその方法を示していwatchPosition()ます。これをテストするには、正確なGPSデバイスが必要です（スマートフォンなど）。
例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>