Geolocation API (API de géolocalisation)

Contexte sécurisé
Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

L'API Geolocation (pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.

L'objet geolocation

L'API Geolocation est publiée via l'objet navigator.geolocation.

Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :

if ("geolocation" in navigator) {
  /* la géolocalisation est disponible */
} else {
  /* la géolocalisation n'est pas disponible */
}

Note : Pour Firefox 24 et les versions antérieures, "geolocation" in navigator renvoyait toujours true même si l'API était désactivée. Cela a été corrigé à partir de Firefox 25 afin de respecter la spécification (bug 884921).

Obtenir la position actuelle

Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode getCurrentPosition(). Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de callback est appelée. Il est possible de fournir un deuxième callback afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.

Note : Par défaut getCurrentPosition() tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.

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

Dans l'exemple ci-avant, la fonction faireQqc() sera exécutée quand la localisation sera obtenue.

Suivre l'évolution de la position

Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de callback qui sera appelée avec les informations mises à jour

Pour cela, on utilise la fonction watchPosition() qui utilise les mêmes paramètres d'entrée que getCurrentPosition(). Ce callback est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.

Note : On peut utiliser watchPosition() sans avoir d'abord appelé getCurrentPosition().

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

La méthode watchPosition() renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode clearWatch() afin d'arrêter le suivi de la position.

navigator.geolocation.clearWatch(watchID);

Paramétrer la réponse

getCurrentPosition() et watchPosition() prennent en argument un callback appelé en cas de succès, un deuxième callback (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet PositionOptions.

Un appel à watchPosition peut donc ressembler à :

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

function geo_error() {
  alert("Sorry, no position available.");
}

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

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

Décrire une position

La position de l'utilisateur est décrite par un objet Position qui fait référence à un objet Coordinates via la propriété coords.

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

The GeolocationPosition interface represents the position of the concerned device at a given time. The position, represented by a GeolocationCoordinates object, comprehends the 2D position of the device, on a spheroid representing the Earth, but also its altitude and its speed.

Properties

The GeolocationPosition interface doesn't inherit any properties.

GeolocationPosition.coords Read only Secure context
Returns a GeolocationCoordinates object defining the current location.
GeolocationPosition.timestamp Read only Secure context
Returns a DOMTimeStamp representing the time at which the location was retrieved.

Methods

The GeolocationPosition interface neither implements, nor inherits any methods.

Specifications

Specification Status Comment
Geolocation API
The definition of 'GeolocationPosition' in that specification.
Recommendation Initial specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
GeolocationPositionChrome Full support 79
Full support 79
No support 5 — 78
Alternate Name
Alternate Name Uses the non-standard name: Position
Edge Full support 79
Full support 79
No support 12 — 79
Alternate Name
Alternate Name Uses the non-standard name: Position
Firefox Full support 72
Full support 72
No support 3.5 — 71
Alternate Name
Alternate Name Uses the non-standard name: Position
IE Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: Position
Opera Full support 16
Alternate Name
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: Position
Safari Full support 5
Alternate Name
Full support 5
Alternate Name
Alternate Name Uses the non-standard name: Position
WebView Android Full support 79
Full support 79
No support ? — 78
Alternate Name
Alternate Name Uses the non-standard name: Position
Chrome Android Full support 79
Full support 79
No support 18 — 78
Alternate Name
Alternate Name Uses the non-standard name: Position
Firefox Android Full support 4
Alternate Name
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: Position
Opera Android Full support 16
Alternate Name
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: Position
Safari iOS Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: Position
Samsung Internet Android Full support 12.0
Full support 12.0
No support 1.0 — 12.0
Alternate Name
Alternate Name Uses the non-standard name: Position
coordsChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 16Safari iOS Full support YesSamsung Internet Android Full support 1.0
Secure context requiredChrome Full support 47Edge Full support ≤18Firefox Full support 55IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 47Chrome Android Full support 47Firefox Android Full support 55Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
timestampChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16Safari Full support 5WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 16Safari iOS Full support YesSamsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.
Uses a non-standard name.

See also

Gérer les erreurs

Le callback de gestion des erreurs (s'il est passé à getCurrentPosition() ou watchPosition()) s'attend à recevoir un objet PositionError comme premier paramètre.

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

Exemple interactif

HTML

<button id = "find-me">Montrer ma localisation</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);

Résultat

Demander la permission

Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre pref. La fonction fournie dans le paramètre de callback sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut true, le module complémentaire pourra accéder aux données de géolocalisation.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
GeolocationChrome Support complet 5Edge Support complet 12Firefox Support complet 3.5
Notes
Support complet 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 Support complet 9Opera Support complet 10.6Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5Samsung Internet Android Support complet 1.0
clearWatchChrome Support complet 5Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 10.6Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5Samsung Internet Android Support complet 1.0
getCurrentPositionChrome Support complet 5Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 10.6Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5Samsung Internet Android Support complet 1.0
Secure context requiredChrome Support complet 50Edge Support complet ≤79Firefox Support complet 55IE Aucun support NonOpera Support complet 37Safari Support complet OuiWebView Android Support complet 51
Notes
Support complet 51
Notes
Notes Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android Support complet 50Firefox Android Support complet 55Opera Android Support complet 37Safari iOS Support complet OuiSamsung Internet Android Support complet 5.0
watchPositionChrome Support complet 5Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 10.6Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Disponibilité

La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que Baidu, Autonavi ou Tencent. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.

Voir aussi