JavaScript　現在の位置情報を取得する方法：Geolocation APIの使い方

JavaScriptのGeolocation APIを使って現在の位置情報を取得する方法について解説します。

Geolocation APIとは何ですか？

Geolocation APIは、ブラウザが提供するAPIの一種で、ユーザーの現在位置情報を取得するために使用されます。

Geolocation APIの基本的な使い方

　Geolocation APIは、Webブラウザ上で現在の位置情報を取得するためのAPIです。このAPIを使えば、Webアプリケーションやモバイルアプリケーション上で、ユーザーの現在地を取得して、その情報を活用することができます。

以下は、Geolocation APIの基本的な使い方です。

Geolocation APIのサポート状況

まず、使用する前にブラウザがGeolocation APIをサポートしているかどうかを確認する必要があります。以下のコードを使って、ブラウザがGeolocation APIをサポートしているかどうかをチェックできます。

if (navigator.geolocation) {
  // Geolocation APIをサポートしている場合の処理
} else {
  // Geolocation APIをサポートしていない場合の処理
}

現在位置情報の取得

　Geolocation APIを使って、現在位置情報を取得するには、getCurrentPosition()メソッドを使用します。このメソッドは、位置情報を取得するためにユーザーに許可を求めるダイアログを表示します。ユーザーが許可すると、位置情報が取得され、successコールバック関数が呼び出されます。逆に、ユーザーが拒否すると、errorコールバック関数が呼び出されます。

navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  // 取得した位置情報を活用する処理
}

function error(error) {
  // 位置情報の取得に失敗した場合の処理
}

　getCurrentPosition()メソッドには、オプション引数も指定できます。たとえば、位置情報の取得に失敗した場合に再試行する回数や、取得する位置情報の精度、取得にかかる最大時間などを設定できます。

現在位置情報の監視

getCurrentPosition()メソッドでは、位置情報を1度だけ取得しますが、watchPosition()メソッドを使用すると、位置情報を定期的に取得できます。このメソッドは、getCurrentPosition()メソッドと同様に、位置情報を取得するためにユーザーに許可を求めるダイアログを表示します。

　ユーザーが許可すると、位置情報の取得が開始され、位置情報が更新されるたびにsuccessコールバック関数が呼び出されます。また位置情報の取得に失敗した場合には、errorコールバック関数が呼び出されます。

const watchId = navigator.geolocation.watchPosition(success, error);

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  // 取得した位置情報を活用する処理
}

function error(error) {
  // 位置情報の取得に失敗した場合の処理
}

　watchPosition()メソッドは、clearWatch()メソッドを使用して停止することができます。たとえば、以下のようにして位置情報の監視を停止することができます。

navigator.geolocation.clearWatch(watchId);

現在位置情報のオプション設定

getCurrentPosition()メソッドやwatchPosition()メソッドには、オプション(options)を指定することができます。主なオプションとその意味は以下のとおりです。

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);

セキュリティについて

Geolocation APIは、位置情報を取得するために、ユーザーに許可を求めるダイアログを表示します。このダイアログは、ユーザーが許可しない限り表示されず、位置情報を取得することができません。また、ダイアログには、どのような目的で位置情報を利用するかが表示されますので、ユーザーは安心して許可を与えることができます。

また、位置情報は個人情報に該当するため、取得した位置情報を適切に扱う必要があります。位置情報を保存したり、第三者に提供したりする場合には、プライバシーポリシーに明示する必要があります。

サンプルプログラムを使った解説

以下では、getCurrentPosition()watchPosition()clearWatch()メソッドを使ったサンプルプログラムを紹介します。

getCurrentPosition()メソッドを使用したサンプルプログラム

以下は、getCurrentPosition()メソッドを使用したサンプルプログラムです。このプログラムでは、現在の位置情報を取得し、緯度と経度をアラートで表示することができます。

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("緯度:" + latitude + ", 経度:" + longitude);
});

watchPosition()メソッドを使用したサンプルプログラム

watchPosition()メソッドを使用したサンプルプログラムでは、位置情報の変化を監視して、その変化をリアルタイムで表示することができます。

var watchId = navigator.geolocation.watchPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log("緯度:" + latitude + ", 経度:" + longitude);
});

clearWatch()メソッドを使用したサンプルプログラム

clearWatch()メソッドを使用したサンプルプログラムを紹介します。このプログラムでは、位置情報の監視を停止することができます。

var watchId = navigator.geolocation.watchPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log("緯度:" + latitude + ", 経度:" + longitude);
});

// 10秒後に監視を停止する
setTimeout(function() {
  navigator.geolocation.clearWatch(watchId);
}, 10000);

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

JavaScriptのGeolocation APIを使って現在の位置情報を取得する方法について解説しました。

この方法で、どの程度の精度で位置情報を取得することができますか？

精度は、デバイスのハードウェアや設定によって異なりますが、一般的には数百メートルの範囲内で位置情報を取得することができます。

Geolocation APIは現在位置情報を取得するための非常に便利な手段ですが、ユーザーのプライバシーやセキュリティに配慮し、適切に取り扱うことが重要です。また、現在の位置情報だけでなく、地図や地域情報、天気情報など様々な用途に使用されるAPIもあるため、必要に応じてAPIの使い分けや組み合わせを検討することも大切です。