Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。Webの標準化団体である W3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。
Geolocation APIは「navigator.geolocation」への呼び出しを介してアクセスします。これにより、ブラウザーはユーザーに自分の位置情報にアクセスする許可を要求します。ユーザーが許可すると、ブラウザは端末上で利用可能な最良の機能（無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなど）を使用してこの情報にアクセスします。
ユーザー環境で Geolocation APIが利用できるかどうかは、この「navigator.geolocation」を参照することでチェックすることができます。Geolocation APIを利用できる環境と利用できない環境で処理を振り分けることも可能となります。
JavaScript source
if (navigator.geolocation) {
// Geolocation APIを利用できる環境向けの処理
console.log("Geolocation API is available.");
} else {
// Geolocation APIを利用できない環境向けの処理
console.log("Geolocation API is not available.");
};
Geolocation APIでユーザーの位置情報の取得をする場合、現在のところ使用できるのは以下の3つのメソッドです。
getCurrentPosition()と watchPosition()は３つの引数を指定することができます。
最初の引数は必須ですが、２番目と３番目の引数は省略することができます。
JavaScript source of getCurrentPosition()
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);
JavaScript source of watchPosition()
var watchId = navigator.geolocation.watchPosition(
successCallback,
errorCallback,
options
);
JavaScript source of clearWatch()
navigator.geolocation.clearWatch(watchId);
getCurrentPosition()または、watchPosition()メソッドで位置情報を取得すると、コールバック関数に positionというオブジェクトが渡されます。 位置情報の取得に成功した場合のコールバック関数内では、positionオブジェクトの coords属性から緯度・経度・高度などの値を取得します。
現在のところ、positionオブジェクトの coords属性から取得できるのは以下の位置情報です。
HTML source
<dl>
<dt>緯度</dt>
<dd id="resultLatitude">-</dd>
<dt>経度</dt>
<dd id="resultLongitude">-</dd>
</dl>
JavaScript source
// 現在位置情報を取得
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);
// 位置情報取得完了時の処理
function successCallback(position) {
// 緯度
const glLatitude = position.coords.latitude;
document.getElementById("resultLatitude").innerHTML = glLatitude;
// 経度
const glLongitude = position.coords.longitude;
document.getElementById("resultLongitude").innerHTML = glLongitude;
};
＞＞詳しくは、クイック・スタート
Geolocation APIでユーザーの位置情報をリクエストしても、ユーザー側の許可設定・接続環境・電波状況などによって位置情報が取得できない場合があります。このような場合に備えて、あらかじめエラー時の処理を設定しておくことができます。
位置情報の取得時のエラーコードは、code属性で取得することができます。code属性では1, 2, 3のいずれかの数値が返ります。それぞれの意味は以下の通りです。
エラー内容の詳細は、message属性で取得することができます。もし、不明なエラーが発生した場合には、 message属性でエラーメッセージを取得することでその詳細が分かるかもしれません。 ただし、message属性は主にデバッグ用であり、 アプリケーションのユーザーインターフェイスには直接使用するべきではないとされています。
JavaScript source of getCurrentPosition()
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);
// 位置情報取得完了時の処理
function successCallback(position) {...};
// 位置情報取得失敗時の処理
function errorCallback(position) {
alert(position.message + "(" + position.code + ")");
};
＞＞詳しくは、現在位置を取得する
３番目の引数は省略も可能ですが、指定すればより詳細に位置情報を制御することができます。指定可能な追加オプションは、現在のところ以下の3つです。
JavaScript source
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
{
enableHighAccuracy: true,
timeout: 60000,
maximumAge: 0
};
);
＞＞詳しくは、現在位置を取得する
【Next】クイック・スタート