位置情報 API

安全なコンテキスト用
この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

位置情報 (Geolocation) API を使用すると、ユーザーが望む場合には、自分の位置情報をウェブアプリケーションに提供することができます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

Geolocation オブジェクトを使用する WebExtension では、マニフェストに "geolocation" パーミッションを追加しなければなりません。ユーザーのオペレーティングシステムは、最初に要求されたときに位置情報へのアクセスを許可するようにユーザーに促します。

概念と使用方法

ウェブアプリでユーザーの位置情報を取得したいと思うことはよくあります。例えば、ユーザーの位置を地図上にプロットしたり、ユーザーの位置に関連するパーソナライズされた情報を表示したりすることができます。

位置情報 APIは navigator.geolocation への呼び出しを介してアクセスします。これにより、ブラウザーはユーザーに自分の位置情報にアクセスする許可を要求します。ユーザーが許可すると、ブラウザーは端末上で利用可能な最良の機能を使用してこの情報にアクセスします (GPS など)。

開発者は、いくつかの異なる方法でこの位置情報にアクセスできるようになりました。

どちらの場合も、メソッド呼び出しには最大3つの引数を取ります。

  • 成功コールバック (必須): 位置情報の取得に成功した場合、このコールバックが GeolocationPosition オブジェクトを唯一の引数として実行され、位置情報へのアクセスを提供します。
  • エラーコールバック (オプション): 位置情報の検索に失敗した場合、このコールバックが GeolocationPositionError オブジェクトを唯一の引数として実行され、何が問題となったかに関するアクセス情報を提供します。
  • 位置データを取得するためのオプションを提供するオプションの PositionOptions オブジェクト。

位置情報の使用に関するさらなる情報は、位置情報 API の使用を参照してください。

インターフェイス

Geolocation
この API のメインクラスです。ユーザーの現在位置の取得、位置の変化の監視、および以前に設定した管理のクリアを行うメソッドが含まれています。
GeolocationPosition
ユーザの位置を表します。 GeolocationPosition インスタンスは、 Geolocation に含まれるメソッドのいずれかの呼び出しが成功した場合に、成功コールバックの内部で返され、タイムスタンプと GeolocationCoordinates オブジェクトのインスタンスが含まれます。
GeolocationCoordinates
ユーザーの位置の座標を表します。 GeolocationCoordinates のインスタンスには、緯度、経度、その他の重要な関連情報が含まれています。
GeolocationPositionError
GeolocationPositionError は、 Geolocation に含まれるメソッドのいずれかの呼び出しに失敗した場合、エラーコールバック内で返され、エラーコードとメッセージが含まれています。
Navigator.geolocation
API のエントリーポイント。 Geolocation オブジェクトのインスタンスを返し、そこから他のすべての機能にアクセスすることができます。

辞書

PositionOptions
Geolocation.getCurrentPosition()Geolocation.watchPosition() の引数として渡すオプションを含むオブジェクトを表します。

以下の例では、 Geolocation API はユーザーの経度と緯度を取得するために使用されます。成功した場合、その位置を表示する openstreetmap.org の URL の有効なハイパーリンクが表示されます。

HTML

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

JavaScript

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

結果

仕様書

仕様書 状態 備考
Geolocation API 勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
GeolocationChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google (privacy) or a custom provider (MLS instructions).
IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
clearWatchChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
getCurrentPositionChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
Secure context requiredChrome 完全対応 50Edge 完全対応 ≤79Firefox 完全対応 55IE 未対応 なしOpera 完全対応 37Safari 完全対応 ありWebView Android 完全対応 51
補足
完全対応 51
補足
補足 Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android 完全対応 50Firefox Android 完全対応 55Opera Android 完全対応 37Safari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
watchPositionChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 10.6Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

可用性

WiFi ベースの測位は Google が提供することが多いため、中国ではバニラの位置情報 API が利用できない場合があります。 Baidu, Autonavi, Tencent などの地域ののサードパーティプロバイダを使用することができます。これらのサービスは、ユーザーの IP アドレスおよび/またはローカルアプリを使用して、より高度な位置情報を提供します。

関連情報