JavaScript Geolocation APIの基本ガイド

概要: このチュートリアルでは、Geolocation APIを使用して、ユーザーが同意した場合にWebアプリケーションがユーザーの位置情報にアクセスできるようにする方法を学びます。

Geolocation APIとは

Geolocation APIを使用すると、Webアプリケーションは、ユーザーが共有に同意した場合に、ユーザーの位置情報にアクセスできます。

Geolocation APIの利点

Geolocation APIは、検索エンジン、eコマースWebサイト、地図、天気アプリなど、ユーザーの位置情報に基づいて動作する必要があるWebアプリケーションに役立ちます。

たとえば、eコマースWebサイトは、ユーザーに位置情報の共有をリクエストできます。情報を入手すると、位置情報に基づいて製品の在庫状況、価格、割引を表示できます。

同様に、Google.comなどの検索エンジンは、検索語句と位置情報に基づいてローカル検索結果を返すことができます。

たとえば、サンフランシスコにいて「ピザ」を検索すると、Googleは現在地に近いピザレストランのリストを表示します。

geolocationオブジェクト

Geolocation APIは、navigator.geolocationオブジェクトを介して利用できます。

Geolocation APIがサポートされているかどうかを確認する

ブラウザがGeolocation APIをサポートしているかどうかを確認するには、次のようにnavigatorオブジェクトにgeolocationプロパティが存在するかどうかをテストします。

if (!navigator.geolocation) {
    console.error(`Your browser doesn't support Geolocation`);
}
Code language: JavaScript (javascript)

現在位置を取得する

ユーザーの現在地を取得するには、navigator.geolocationオブジェクトのgetCurrentPosition()メソッドを呼び出します。

getCurrentPosition()メソッドは、ユーザーの位置情報を検出するための非同期リクエストを送信し、最新のデータを取得するために測位ハードウェア（GPSなど）にクエリを実行します。

getCurrentPosition()は成功または失敗する可能性があります。それぞれの場合に実行される2つのオプションのコールバックを受け入れます。

getCurrentPosition()が成功すると、ユーザーの位置情報がGeolocationCoordinatesオブジェクトとして取得されます。

GeolocationCoordinatesオブジェクトには、位置を表すlatitude（緯度）とlongitude（経度）プロパティがあります。

JavaScript Geolocationの例

次の例は、ボタンが1つあるシンプルなアプリケーションを示しています。ボタンをクリックすると、ブラウザは位置情報の共有をリクエストします。同意すると、現在の緯度と経度が表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Geolocation Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <button id="show" class="btn">Show my location</button>
        <div id="message"></div>
    </div>
    <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

app.jsファイルの内容は次のとおりです。

(() => {
    const message = document.querySelector('#message');

    // check if the Geolocation API is supported
    if (!navigator.geolocation) {
        message.textContent = `Your browser doesn't support Geolocation`;
        message.classList.add('error');
        return;
    }

    // handle click event
    const btn = document.querySelector('#show');
    btn.addEventListener('click', function () {
        // get the current position
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    });


    // handle success case
    function onSuccess(position) {
        const {
            latitude,
            longitude
        } = position.coords;

        message.classList.add('success');
        message.textContent = `Your location: (${latitude},${longitude})`;
    }

    // handle error case
    function onError() {
        message.classList.add('error');
        message.textContent = `Failed to get your location!`;
    }
})();Code language: JavaScript (javascript)