【JavaScript】現在の位置情報を取得する【Geolocation API】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptのGeolocation APIで現在の位置情報を取得する方法をご紹介しています。

上記の疑問にお答えしています。

では、解説していきます。

現在の位置情報を取得する

JavaScriptで現在の位置情報を取得する方法として、Geolocation APIがあります。Geolocation APIはユーザーの位置情報にアクセスするための仕組みです。無断で使用できるものではなく、アクセスするにはユーザーの許諾を得る必要があります。（ブラウザに表示される「位置情報へのアクセスを許可しますか？」が許諾となります。）

Geolocation APIはユーザーの環境に応じてGPS（Global Positioning System）やWi-Fi、携帯の基地局やIPアドレスから現在位置を割り出します。環境によって取得できる位置情報の精度が異なりますので、使用される際には理解しておきましょう。

Geolocation APIには、navigatorオブジェクトのgeolocationプロパティでアクセスすることができます。現在位置を取得するにはgetCurrentPosition()を呼び出します。

下記は、緯度／経度の取得例です。Positionオブジェクトから現在位置の割り出しに必要な情報を取得することができます。

navigator.geolocation.getCurrentPosition((position)=> {

    //緯度

    let lat = position.coords.latitude;

    //経度

    let lng = position.coords.longitude;

});

上記の方法で緯度／経度を取得することができます。

Positionオブジェクトのプロパティについて

Positionオブジェクトは主に2つのプロパティを持っています。位置関係の情報がまとまっているcoordsと日時を返すtimestampです。これらを介してユーザの現在の位置情報を取得することができます。

position.coords

position.coords.latitude	緯度
position.coords.longitude	経度
position.coords.altitude	高度
position.coords.accuracy	緯度／経度の誤差（m）
position.coords.altitudeAccuracy	高度の誤差（m）
position.coords.heading	方角（度）
position.coords.speed	速度（m/秒）

position.timestamp

position.timestamp	取得日時（ミリ秒）

緯度／経度だけではなく高度や方角も取得できるため、目的地までの経路を表示するような用途に使えそうですね。

Google Mapに緯度／経度を渡して現在位置を表示する

Geolocation APIで現在位置を取得できるようになったので、試しにGoogle Mapに現在位置を渡してマップに表示する処理を作成してみます。

HTML

<div id="app">

    <dl>

        <dt>緯度</dt>

        <dd id="lat">-----</dd>

    </dl>

    <dl>

        <dt>経度</dt>

        <dd id="lng">-----</dd>

    </dl>

    <a id="map" href="" target="_blank">Google Map</a>

</div>

JS

let lat = document.getElementById('lat');

let lng = document.getElementById('lng');

let map = document.getElementById('map');

navigator.geolocation.getCurrentPosition((position)=>{   
    let coords = position.coords;
    lat.textContent = coords.latitude;

    lng.textContent = coords.longitude;
    map.setAttribute('href', `https://www.google.co.jp/maps/@${coords.latitude},${coords.longitude},15z`);

});

では、デモで動作確認を……。

としたいところですが、本サイトでは位置情報の取得に関する規約を用意していません。なので動作確認は下記のリンク先でしていただければと思います！

最後に

Geolocation APIのおかげで位置情報の取扱いが簡単でとてもシンプルになりました。Uberなどもそうですが、今後も位置情報を活用したアプリが次々に出てくると思います。Webアプリでも需要は高まると思いますので、Geolocation APIの使い方は知っておいた方が良さそうですね！

以上、JavaScriptのGeolocation APIで現在の位置情報を取得する方法のご紹介でした！