【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で現在の位置情報を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍