Geolocation API

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.


Geolocation API는 사용자가 원할 경우, 웹 어플리케이션으로 그들의 위치를 제공할 수 있게 해줍니다. 사생활 보호의 이유로 사용자는 위치 정보 제공을 위한 권한 요청을 받습니다.

geolocation 객체

Geolocation API는 navigator.geolocation 객체를 통해 공개되었습니다.

해당 객체가 존재하는 경우 지오로케이션 서비스가 가능합니다. 지오로케이션 사용 가능 여부는 다음과 같이 테스트 할 수 있습니다.

if ("geolocation" in navigator) {
  /* 지오로케이션 사용 가능 */
} else {
  /* 지오로케이션 사용 불가능 */
}
노트: Firefox 24 이하 버전에서, navaigator의 "geolocation" 객체는  API를 사용할 수 없더라도 언제나 true값을 반환합니다. 이 부분은 Firefox 25에서 표준에 맞게 수정되었습니다. (bug 884921).

현재 위치 가져오기

getCurrentPosition() 메서드를 호출해 사용자의 현재 위치를 얻을 수 있습니다. 사용자 위치를 탐지하는 비동기 요청을 초기화하고, 하드웨어에 사용자의 최신 위치 정보를 요청합니다. 위치가 확인되면 정의된 콜백 함수가 실행됩니다. 선택적으로 에러가 발생할 때 실행될 두번째 콜백함수를 지정할 수 있습니다. 세번째 선택적인 파라미터는 옵션 객체인데, 위치값이 반환된 최대 시간과 요청을 대기할 시간, 그리고 높은 정확도를 사용할 지 여부를 지정합니다.

노트: 기본적으로, getCurrentPosition()은 낮은 정확도의 결과를 가능한 빠르게 응답하려합니다. 정확도에 개의치 않고 빠른 응답을 필요로 하는 경우 유용합니다. GPS가 있는 장치를 예로들면, GPS 수정값을 얻는데 1분 이상의 시간이 필요하기 때문에 덜 정확한 데이터(IP 주소 또는 wifi)가 getCurrentPosition()으로 반환될수도 있습니다.

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

위의 예제는 사용자 위치가 확인되면 do_something() 함수를 실행합니다.

현재 위치 추적하기

만약 위치 정보가 변경(장치가 움직였거나 좀 더 정확한 위치 정보가 도착했을때)되었다면 갱신된 위치 정보로 호출되는 콜백 함수를 지정할 수 있습니다.
이는 getCurrentPosition()과 동일한 입력 파라미터를 갖는 watchPosition() 함수를 사용하면됩니다. 콜백 함수는 여러 번 호출되어, 브라우저가 사용자의 움직인 위치를 업데이트하거나 사용자의 위치를 얻는데 사용되는 다른 기술을 사용해 더 정확한 위치를 얻을 수 있도록합니다. getCurrentPosition() 함수에서와 마찬가지로 옵션인 에러 콜백 함수도 반복적으로 호출될 수 있습니다.

노트:  초기 getCurrentPosition() 함수 호출이 없이도 watchPosition() 함수를 사용할 수 있습니다.

var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

watchPosition() 메서드는 숫자로 된 ID를 반환하며, watcher를 식별하는데 사용합니다. clearPosition() 메서드에 이 값을 사용하여 사용자 위치 추적을 중단합니다.

navigator.geolocation.clearWatch(watchID);

미세 조정 응답

getCurrentPosition()watchPosition() 모두는 success 콜백, 옵션인 에러 콜백과 PositionOptions 객체를 받습니다.

watchPosition 함수의 사용은 아래와 같습니다.:

function geo_success(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
  alert("위치 정보를 사용할 수 없습니다.");
}

var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);


위치 설명

사용자의 위치는 Coordinates 객체를 참조하는 Position 객체를 사용하여 나타냅니다.

에러 처리

getCurrentPosition() 또는 watchPosition()를 호출할 때 에러 콜백 함수를 전달한 경우, 첫 번째 파라미터로 PositionError 객체가 옵니다.

function errorCallback(error) {
  alert('ERROR(' + error.code + '): ' + error.message);
};

Geolocation 라이브 예제

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);

라이브 결과

권한 프롬프트

addons.mozilla.org에 호스팅된 지오로케이션 데이터를 사용하는 모든 부가 기능은 동작하기전에 반드시 명시적으로 권한 요청을 해야합니다. 아래의 함수는 웹페이지에 자동으로 표시되는 프롬프트 방식으로 권한을 요청할것입니다. 사용자의 응답은 가능한 경우, pref 파라미터에의해 지정된 설정에 저장될것입니다. callback 파라미터로 제공된 함수는 사용자의 응답이 나타내는 불리언 값으로 호출됩니다. true인 경우, 부가 기능은 지오로케이션 데이터에 접근할 수 있습니다.

function prompt(window, pref, message, callback) {
    let branch = Components.classes["@mozilla.org/preferences-service;1"]
                           .getService(Components.interfaces.nsIPrefBranch);

    if (branch.getPrefType(pref) === branch.PREF_STRING) {
        switch (branch.getCharPref(pref)) {
        case "always":
            return callback(true);
        case "never":
            return callback(false);
        }
    }

    let done = false;

    function remember(value, result) {
        return function() {
            done = true;
            branch.setCharPref(pref, value);
            callback(result);
        }
    }

    let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Share Location",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
            {
                label: "Always Share",
                accessKey: "A",
                callback: remember("always", true)
            },
            {
                label: "Never Share",
                accessKey: "N",
                callback: remember("never", false)
            }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
}

prompt(window,
       "extensions.foo-addon.allowGeolocation",
       "Foo Add-on wants to know your location.",
       function callback(allowed) { alert(allowed); });

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
GeolocationChrome Full support 5Edge Full support 12Firefox Full support 3.5
Notes
Full support 3.5
Notes
Notes GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google (privacy) or a custom provider (MLS instructions).
IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
clearWatchChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
getCurrentPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
Secure context requiredChrome Full support 50Edge ? Firefox Full support 55IE No support NoOpera Full support 37Safari Full support YesWebView Android Full support 51
Notes
Full support 51
Notes
Notes Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android Full support 50Firefox Android Full support 55Opera Android Full support 37Safari iOS Full support YesSamsung Internet Android ?
watchPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

유효성

WiFi 기반 로케이셔닝이 종종 Google에 의해 제공됨에따라, 순수 Geolocation API는 중국에서 사용이 불가할 수 있습니다. BaiduAutonaviTencent와 같은 로컬 제3자 제공자를 사용해야할 수도 있습니다. 이러한 서비스들은 향상된 포지셔닝을 제공하기 위해 사용자의 IP 주소 및/또는 로컬 앱을 사용합니다.

함께 보기