logo oujood
🔍

API Géolocalisation HTML5 — Localiser un utilisateur en JavaScript

L'API Géolocalisation HTML5 donne accès à la position GPS d'un visiteur directement depuis le navigateur, sans plugin ni installation.
Via navigator.geolocation, vous récupérez latitude, longitude, altitude et précision en quelques lignes de JavaScript.
Le navigateur demande toujours l'accord de l'utilisateur avant de transmettre sa position — la confidentialité est protégée par design.

OUJOOD.COM

Comment fonctionne l'API Géolocalisation HTML5

HTML5 — Cours et tutoriel JavaScript

L'API Géolocalisation HTML5 est accessible via navigator.geolocation, un objet natif présent dans tous les navigateurs récents. Elle interroge les capteurs disponibles sur l'appareil : puce GPS sur smartphone ou tablette, triangulation Wi-Fi, antennes réseau mobile, ou en dernier recours l'adresse IP. La précision varie selon la source : quelques mètres avec un GPS matériel, parfois plusieurs centaines de mètres via IP.

Compatibilité navigateurs en 2026

Chrome, Firefox, Edge, Safari et Opera supportent tous l'API, sur desktop et mobile. Un point bloquant à retenir : depuis 2020, tous les navigateurs modernes refusent l'accès à la géolocalisation sur un site HTTP. Votre page doit impérativement être servie en HTTPS, sinon l'API retourne une erreur de permission avant même que l'utilisateur ait pu répondre.

Remarque : Sur un ordinateur de bureau, la précision repose souvent sur le Wi-Fi ou l'IP — attendez-vous à une marge d'erreur de plusieurs centaines de mètres. Sur un smartphone avec GPS actif, la précision descend généralement sous les 10 mètres.

Obtenir la position avec getCurrentPosition()

navigator.geolocation.getCurrentPosition() déclenche une seule mesure de localisation. Le navigateur affiche une demande de permission à l'utilisateur, puis appelle votre callback dès que la position est disponible. La méthode accepte trois paramètres : une fonction de succès, une fonction d'erreur, et un objet options pour affiner le comportement (précision, délai, cache).

Exemple 1 — Afficher latitude et longitude dans la page

Cet exemple de base vérifie d'abord que l'API est disponible, puis affiche les coordonnées brutes dans un paragraphe HTML dès que l'utilisateur clique.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Géolocalisation HTML5 — exemple de base</title>
</head>
<body>
<p id="resultat">Cliquez sur le bouton pour afficher vos coordonnées GPS :</p>
<button onclick="obtenirPosition()">Me localiser</button>
<script>
// Référence vers le paragraphe d'affichage
var affichage = document.getElementById("resultat");
function obtenirPosition() {
  // Vérifie que le navigateur supporte l'API Géolocalisation
  if (navigator.geolocation) {
    // Déclenche une demande de localisation unique
    // Le navigateur affiche une boîte de dialogue pour demander l'autorisation
    navigator.geolocation.getCurrentPosition(afficherPosition);
  } else {
    // Navigateur trop ancien ou contexte HTTP non sécurisé
    affichage.innerHTML = "Géolocalisation non prise en charge par ce navigateur.";
  }
}
function afficherPosition(position) {
  // coords.latitude et coords.longitude sont en degrés décimaux WGS84
  // Exemple : 33.5731 pour Casablanca
  affichage.innerHTML =
    "<strong>Latitude :</strong> " + position.coords.latitude +
    "<br><strong>Longitude :</strong> " + position.coords.longitude;
}
</script>
</body>
</html>

Ce qui se passe à l'exécution :

  • if (navigator.geolocation) protège le script contre les vieux navigateurs et les pages servies en HTTP où l'objet peut être absent.
  • La fonction afficherPosition reçoit un objet GeolocationPosition — c'est dans son sous-objet coords que se trouvent latitude, longitude et les autres données.
  • Les coordonnées sont en degrés décimaux WGS84, le format GPS universel — le même qu'utilise Google Maps ou OpenStreetMap.

Gérer les erreurs et les refus d'autorisation

En pratique, beaucoup d'utilisateurs refusent la localisation. D'autres sont sur un réseau qui ne permet pas la triangulation. Sans gestion d'erreur, votre application reste silencieuse — ou pire, plante. Le deuxième paramètre de getCurrentPosition() est une fonction qui reçoit un objet GeolocationPositionError avec un code numérique pour identifier exactement ce qui a échoué.

Exemple 2 — Gestion complète des erreurs de géolocalisation

Cet exemple couvre les quatre codes d'erreur définis par la spécification W3C, plus les trois options de configuration les plus utiles.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Géolocalisation HTML5 — gestion des erreurs</title>
</head>
<body>
<p id="resultat">Cliquez sur le bouton pour vous localiser :</p>
<button onclick="obtenirPosition()">Me localiser</button>
<script>
var affichage = document.getElementById("resultat");
function obtenirPosition() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      afficherPosition,
      gererErreur,
      {
        enableHighAccuracy: true, // Active le GPS précis — consomme plus de batterie
        timeout: 10000,           // Abandon après 10 secondes sans réponse
        maximumAge: 0             // Interdit d'utiliser une position mise en cache
      }
    );
  } else {
    affichage.innerHTML = "Géolocalisation non supportée par ce navigateur.";
  }
}
function afficherPosition(position) {
  affichage.innerHTML =
    "<strong>Latitude :</strong> " + position.coords.latitude +
    "<br><strong>Longitude :</strong> " + position.coords.longitude +
    "<br><strong>Précision :</strong> " + position.coords.accuracy + " m";
}
function gererErreur(erreur) {
  switch (erreur.code) {
    case erreur.PERMISSION_DENIED:
      // L'utilisateur a cliqué sur "Bloquer" dans la boîte de dialogue
      affichage.innerHTML = "Accès refusé — l'utilisateur a bloqué la localisation.";
      break;
    case erreur.POSITION_UNAVAILABLE:
      // Aucune source exploitable : pas de GPS, pas de Wi-Fi, IP non géolocalisable
      affichage.innerHTML = "Position indisponible — aucune source de données GPS.";
      break;
    case erreur.TIMEOUT:
      // Le délai défini dans timeout a été dépassé sans réponse
      affichage.innerHTML = "Délai dépassé — la position n'a pas pu être obtenue à temps.";
      break;
    case erreur.UNKNOWN_ERROR:
      // Erreur interne non catégorisée par le navigateur
      affichage.innerHTML = "Erreur inconnue lors de la récupération de la position.";
      break;
  }
}
</script>
</body>
</html>

Les quatre codes d'erreur en détail :

  • PERMISSION_DENIED (code 1) : l'utilisateur a explicitement refusé, ou la politique du site bloque la demande. Affichez un message clair et proposez une alternative (saisie manuelle d'une ville, par exemple).
  • POSITION_UNAVAILABLE (code 2) : aucune source disponible — GPS éteint, pas de Wi-Fi à portée, IP non géolocalisable. Fréquent sur certains VPN ou en mode avion.
  • TIMEOUT (code 3) : le délai configuré s'est écoulé. Diminuez timeout pour échouer vite, ou augmentez-le si votre public cible est sur mobile avec un GPS lent à démarrer.
  • UNKNOWN_ERROR (code 0) : erreur interne du navigateur ou du système d'exploitation — rare, mais à prévoir dans le switch.

Afficher la position sur une carte Google Maps

Des coordonnées GPS sont peu lisibles pour un utilisateur. L'intégration la plus directe est d'afficher un marqueur sur Google Maps via l'API JavaScript Maps. Depuis 2016, Google Maps Platform requiert une clé API obtenue sur Google Cloud Console. L'exemple ci-dessous suppose que vous avez déjà votre clé — remplacez simplement YOUR_API_KEY.

Exemple 3 — Carte interactive Google Maps centrée sur l'utilisateur

Ce code récupère les coordonnées GPS, initialise une carte Google Maps dans un div dédié, puis pose un marqueur sur la position de l'utilisateur.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Géolocalisation HTML5 — Google Maps interactif</title>
  <style>
    #carte { height: 400px; width: 100%; } /* Dimensions de la carte — ajustez selon votre mise en page */
  </style>
</head>
<body>
<p id="resultat">Cliquez pour vous localiser sur la carte :</p>
<button onclick="obtenirPosition()">Me localiser sur la carte</button>
<div id="carte"></div>
<!-- Remplacez YOUR_API_KEY par votre clé Google Maps Platform -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
var affichage = document.getElementById("resultat");
function obtenirPosition() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(afficherCarte, gererErreur);
  } else {
    affichage.innerHTML = "Géolocalisation non supportée.";
  }
}
function afficherCarte(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  // google.maps.LatLng construit un point géographique à partir de la latitude et longitude
  var coordonnees = new google.maps.LatLng(lat, lon);
  var options = {
    center: coordonnees,
    zoom: 15,                                        // 15 = niveau quartier, 18 = niveau rue
    mapTypeId: google.maps.MapTypeId.ROADMAP         // Plan standard — alternatives : SATELLITE, HYBRID
  };
  // Injecte la carte dans le div#carte
  var carte = new google.maps.Map(document.getElementById("carte"), options);
  // Pose un marqueur cliquable sur la position détectée
  new google.maps.Marker({
    position: coordonnees,
    map: carte,
    title: "Vous êtes ici !"
  });
  affichage.innerHTML = "Carte centrée sur votre position (" + lat.toFixed(5) + ", " + lon.toFixed(5) + ")";
}
function gererErreur(erreur) {
  affichage.innerHTML = "Erreur de localisation (code " + erreur.code + ") : " + erreur.message;
}
</script>
</body>
</html>

À quoi sert la géolocalisation web en 2026

L'API Géolocalisation HTML5 est utilisée dans des dizaines de contextes différents selon les besoins de l'application. Voici les cas d'usage les plus courants :

  • Commerce de proximité : lister les magasins, restaurants ou pharmacies les plus proches, avec la distance calculée à la volée sans saisie d'adresse.
  • Tourisme et patrimoine : guider les visiteurs vers les sites proches selon leur position actuelle, avec mise à jour en temps réel.
  • Navigation et sport : intégrer un tracé GPS pour la randonnée, le vélo ou la course — via watchPosition() pour le suivi continu.
  • Livraison et logistique : afficher la position du livreur sur une carte en temps réel, avec actualisation automatique de la position.
  • Météo locale : détecter automatiquement la ville de l'utilisateur pour afficher les prévisions sans formulaire de recherche.

Propriétés de l'objet GeolocationPosition

Quand getCurrentPosition() réussit, la fonction de succès reçoit un objet GeolocationPosition. Ses données sont regroupées dans le sous-objet coords. Les trois premières propriétés sont toujours présentes — les suivantes dépendent du matériel de l'appareil :

Propriété Type Description
coords.latitude Number Latitude en degrés décimaux WGS84 (toujours disponible)
coords.longitude Number Longitude en degrés décimaux WGS84 (toujours disponible)
coords.accuracy Number Rayon de précision en mètres autour de la position (toujours disponible)
coords.altitude Number | null Altitude en mètres au-dessus du niveau de la mer — GPS matériel uniquement
coords.altitudeAccuracy Number | null Précision verticale en mètres
coords.heading Number | null Direction en degrés (0° = Nord, 90° = Est) — disponible seulement en déplacement
coords.speed Number | null Vitesse en mètres par seconde
timestamp DOMTimeStamp Horodatage Unix de la mesure en millisecondes

Suivi GPS en temps réel avec watchPosition()

getCurrentPosition() fait une seule mesure puis s'arrête. Quand vous avez besoin d'une position qui se met à jour en continu — navigation, sport, livraison — utilisez watchPosition(). Le principe est identique, mais le callback est appelé à chaque nouveau changement de position détecté par le navigateur. La méthode retourne un identifiant numérique : conservez-le pour passer à clearWatch() et stopper le suivi quand l'utilisateur n'en a plus besoin. C'est important : laisser watchPosition() tourner en arrière-plan consomme la batterie inutilement.

Exemple 4 — Suivi GPS continu avec watchPosition()

Cet exemple affiche la position en temps réel et permet à l'utilisateur de démarrer ou stopper le suivi via deux boutons distincts.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Géolocalisation HTML5 — watchPosition suivi GPS</title>
</head>
<body>
<p id="resultat">Position GPS en attente...</p>
<button onclick="demarrerSuivi()">Démarrer le suivi GPS</button>
<button onclick="arreterSuivi()">Arrêter le suivi</button>
<script>
var affichage = document.getElementById("resultat");
var idSuivi; // Stocke l'identifiant retourné par watchPosition — nécessaire pour clearWatch
function demarrerSuivi() {
  if (navigator.geolocation) {
    idSuivi = navigator.geolocation.watchPosition(
      afficherPosition,
      gererErreur,
      { enableHighAccuracy: true, timeout: 5000 }
    );
    affichage.innerHTML = "Suivi GPS actif...";
  } else {
    affichage.innerHTML = "Géolocalisation non supportée.";
  }
}
function arreterSuivi() {
  if (idSuivi) {
    // clearWatch stoppe le suivi et libère le GPS — économie de batterie
    navigator.geolocation.clearWatch(idSuivi);
    affichage.innerHTML = "Suivi GPS arrêté.";
  }
}
function afficherPosition(position) {
  // Ce callback est appelé automatiquement à chaque changement de position
  affichage.innerHTML =
    "<strong>Latitude :</strong> " + position.coords.latitude.toFixed(6) +
    "<br><strong>Longitude :</strong> " + position.coords.longitude.toFixed(6) +
    "<br><strong>Précision :</strong> " + Math.round(position.coords.accuracy) + " m" +
    "<br><strong>Mis à jour :</strong> " + new Date(position.timestamp).toLocaleTimeString();
}
function gererErreur(erreur) {
  affichage.innerHTML = "Erreur GPS : " + erreur.message;
}
</script>
</body>
</html>

Par carabde | Mis à jour le 08 avril 2026

chapitre précédent     sommaire     chapitre suivant