Tutoriel : la géolocalisation en HTML5

La géolocalisation en HTML5 permet à une page web de connaître la position de l'utilisateur, avec sa permission. Cette fonctionnalité ouvre la porte à des cartes interactives, des recherches de commerces à proximité ou encore des applications de suivi. Découvrons comment l'utiliser correctement, en JavaScript, étape par étape.

L'API de géolocalisation

L'API de géolocalisation est exposée par l'objet navigator.geolocation. Elle ne fait pas partie de la spécification HTML elle-même mais elle est associée à l'écosystème HTML5 et supportée par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), aussi bien sur ordinateur que sur mobile.

Avant d'appeler quoi que ce soit, il est prudent de vérifier que l'API existe dans le navigateur. Cela évite les erreurs sur les environnements anciens ou restreints.

if ("geolocation" in navigator) {
  // L'API est disponible
  console.log("Géolocalisation supportée");
} else {
  console.log("Géolocalisation non supportée par ce navigateur");
}

L'objet navigator.geolocation expose trois méthodes principales : getCurrentPosition pour une mesure unique, watchPosition pour un suivi continu et clearWatch pour arrêter ce suivi. Vous pouvez d'ailleurs voir le résultat concret sur cette démo de géolocalisation.

Obtenir la position une fois

La méthode getCurrentPosition(success, error, options) récupère la position actuelle une seule fois. Elle accepte trois arguments : une fonction de succès (obligatoire), une fonction d'erreur (facultative) et un objet d'options (facultatif).

Quand la mesure réussit, la fonction de succès reçoit un objet position. Son contenu le plus utile se trouve dans position.coords, qui expose plusieurs propriétés :

• latitude et longitude : les coordonnées en degrés décimaux.
• accuracy : la précision de la position en mètres.
• altitude : l'altitude en mètres (peut valoir null).
• altitudeAccuracy : la précision de l'altitude en mètres.
• speed : la vitesse en mètres par seconde (souvent null sur ordinateur).
• heading : la direction du déplacement en degrés.

Voici un exemple complet qui affiche la position dans la console :

navigator.geolocation.getCurrentPosition(
  function (position) {
    var coords = position.coords;
    console.log("Latitude : " + coords.latitude);
    console.log("Longitude : " + coords.longitude);
    console.log("Précision : " + coords.accuracy + " mètres");

    if (coords.altitude !== null) {
      console.log("Altitude : " + coords.altitude + " mètres");
    }
    if (coords.speed !== null) {
      console.log("Vitesse : " + coords.speed + " m/s");
    }
  },
  function (error) {
    console.error("Erreur : " + error.message);
  }
);

L'objet position contient aussi une propriété timestamp, qui indique la date et l'heure de la mesure (en millisecondes depuis le 1er janvier 1970). Pratique pour savoir si une position est récente ou non.

Les options de la requête

Le troisième argument permet d'affiner le comportement de la requête grâce à trois propriétés :

• enableHighAccuracy : un booléen. À true, le navigateur tente d'obtenir la position la plus précise possible, en utilisant le GPS sur mobile par exemple. Cela consomme plus de batterie et peut être plus lent.
• timeout : le temps maximal, en millisecondes, accordé pour obtenir une position. Au-delà, une erreur de type TIMEOUT est déclenchée.
• maximumAge : l'âge maximal, en millisecondes, d'une position mise en cache que l'on accepte de réutiliser. À 0, le navigateur recalcule toujours une nouvelle position.

var options = {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);

Suivre la position en temps réel

Pour suivre les déplacements de l'utilisateur, par exemple sur une carte, utilisez watchPosition. Sa signature est identique à getCurrentPosition, mais la fonction de succès est rappelée à chaque fois que la position change.

La méthode renvoie un identifiant numérique. Conservez-le pour pouvoir arrêter le suivi plus tard avec clearWatch.

var watchId = navigator.geolocation.watchPosition(
  function (position) {
    console.log(
      "Nouvelle position : " +
      position.coords.latitude + ", " +
      position.coords.longitude
    );
  },
  function (error) {
    console.error("Erreur de suivi : " + error.message);
  },
  { enableHighAccuracy: true }
);

// Plus tard, pour arrêter le suivi :
navigator.geolocation.clearWatch(watchId);

Pensez toujours à appeler clearWatch quand le suivi n'est plus utile, par exemple lorsque l'utilisateur quitte la page ou ferme la carte. Cela libère les ressources et préserve la batterie. Pour aller plus loin et afficher la position sur une carte, consultez le tutoriel géolocalisation avec Google Maps.

Gérer les erreurs

La fonction d'erreur reçoit un objet contenant une propriété code et un message lisible. Trois codes sont définis par la spécification, accessibles sous forme de constantes sur l'objet passé en argument :

• PERMISSION_DENIED (code 1) : l'utilisateur a refusé l'accès à sa position.
• POSITION_UNAVAILABLE (code 2) : la position n'a pas pu être déterminée (signal indisponible).
• TIMEOUT (code 3) : le délai fixé par l'option timeout a été dépassé.

function error(err) {
  switch (err.code) {
    case err.PERMISSION_DENIED:
      console.log("L'utilisateur a refusé la géolocalisation.");
      break;
    case err.POSITION_UNAVAILABLE:
      console.log("Position indisponible.");
      break;
    case err.TIMEOUT:
      console.log("Délai dépassé.");
      break;
    default:
      console.log("Erreur inconnue.");
  }
}

navigator.geolocation.getCurrentPosition(success, error);

Gérer chaque cas séparément permet d'afficher un message clair à l'utilisateur, plutôt qu'une erreur générique. Un refus de permission, par exemple, mérite une explication différente d'un simple problème de signal.

HTTPS et vie privée

Point essentiel à connaître : depuis environ 2016, l'API de géolocalisation n'est disponible que sur les origines sécurisées, c'est à dire les pages servies en HTTPS. Sur une page en HTTP simple, navigator.geolocation est soit absent, soit bloqué, et l'appel échoue silencieusement ou renvoie une erreur. Seule exception courante : localhost, autorisé en HTTP pour faciliter le développement local.

Cette restriction vise à protéger la vie privée des utilisateurs, car la position est une donnée sensible. Quelques bonnes pratiques s'imposent :

• Servez impérativement votre site en HTTPS pour que l'API fonctionne en production.
• Demandez la position au bon moment, idéalement après une action de l'utilisateur (un clic sur un bouton), plutôt qu'au chargement de la page.
• Expliquez clairement pourquoi vous avez besoin de la position avant de déclencher la demande d'autorisation.
• Ne stockez et ne transmettez les coordonnées que si c'est réellement nécessaire, et informez l'utilisateur de l'usage qui en est fait.

En respectant ces principes, vous offrez une expérience de géolocalisation à la fois fonctionnelle, performante et respectueuse de la vie privée de vos visiteurs.