Obtenir une position avec l’API Géolocalisation JavaScript

Comprendre les bases de l’API Geolocation JS

Avant de plonger dans le code, il est essentiel de comprendre comment fonctionne la localisation navigateur. L’API Geolocation permet aux applications Web d’accéder aux données géographiques de l’appareil (ordinateur ou smartphone). Pour déterminer cette position, le navigateur croise plusieurs sources de données : l’adresse IP, les réseaux Wi-Fi environnants, les antennes relais et, si disponible, la puce GPS de l’appareil.

Cependant, l’accès à ces données sensibles est soumis à deux règles de sécurité strictes :

• Le protocole HTTPS : L’API de géolocalisation ne fonctionne que sur des contextes sécurisés. Si votre site est en HTTP, les requêtes seront bloquées par les navigateurs modernes. (Note : localhost est considéré comme sécurisé pour le développement).
• Le consentement explicite : Le navigateur affichera toujours une fenêtre contextuelle demandant à l’utilisateur s’il accepte de partager sa position. Vous ne pouvez pas contourner cette étape.

Vérifier la compatibilité du navigateur

Bien que l’API soit largement supportée par tous les navigateurs modernes, il est toujours recommandé de vérifier sa disponibilité avant d’exécuter votre code. Cela permet d’éviter des erreurs JavaScript bloquantes sur des navigateurs très anciens ou des configurations spécifiques.

La vérification se fait en testant la présence de l’objet geolocation dans l’objet global navigator.

if ("geolocation" in navigator) {
    console.log("Super, la géolocalisation est supportée !");
    // Nous pourrons lancer notre requête ici
} else {
    console.warn("La géolocalisation n'est pas supportée par ce navigateur.");
}

Obtenir la position actuelle de l’utilisateur

Pour récupérer la position instantanée de l’utilisateur, nous utilisons la méthode getCurrentPosition. Cette fonction asynchrone prend jusqu’à trois paramètres : une fonction de succès (obligatoire), une fonction d’erreur (recommandée) et un objet d’options (facultatif).

Extraire les coordonnées utilisateur

Lorsque l’utilisateur accepte de partager sa position et que le navigateur réussit à la calculer, la fonction de succès est appelée. Elle reçoit en paramètre un objet contenant les précieuses coordonnées.

function enCasDeSucces(position) {
    // Récupération de la latitude et de la longitude
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    
    // Récupération de la précision en mètres
    const precision = position.coords.accuracy;

    console.log(`Votre position : ${latitude}, ${longitude}`);
    console.log(`Précision : à ${precision} mètres près.`);
}

// Appel de la méthode
if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(enCasDeSucces);
}

L’objet position.coords contient également d’autres informations utiles si l’appareil le permet, comme l’altitude (altitude), la vitesse de déplacement (speed) ou la direction (heading).

Gérer les erreurs et les refus

En matière de géolocalisation, les erreurs sont fréquentes. L’utilisateur peut refuser la demande, le signal GPS peut être inexistant, ou le délai d’attente peut expirer. Il est indispensable de fournir une fonction de rappel pour traiter ces cas et offrir une bonne expérience utilisateur.

Analyser les codes d’erreur

L’objet d’erreur retourné par l’API contient un code numérique (code) et un message explicatif (message). Voici comment les intercepter :

function enCasDErreur(erreur) {
    switch(erreur.code) {
        case erreur.PERMISSION_DENIED:
            console.error("L'utilisateur a refusé de partager sa position.");
            // Action recommandée : afficher un message expliquant pourquoi la position est utile.
            break;
        case erreur.POSITION_UNAVAILABLE:
            console.error("Les données de localisation sont indisponibles (pas de réseau ou de GPS).");
            break;
        case erreur.TIMEOUT:
            console.error("Le délai d'attente pour obtenir la position a été dépassé.");
            break;
        default:
            console.error("Une erreur inconnue s'est produite.");
            break;
    }
}

// Appel avec gestion des erreurs
navigator.geolocation.getCurrentPosition(enCasDeSucces, enCasDErreur);

Affiner la requête avec les options

Le troisième paramètre de getCurrentPosition permet de configurer le comportement de la recherche de localisation. C’est un objet qui accepte trois propriétés essentielles.

Configurer la précision et le cache

• enableHighAccuracy : Un booléen. Si défini sur true, le navigateur essaiera d’obtenir la position la plus précise possible (souvent en activant la puce GPS). Cela consomme plus de batterie et prend plus de temps.
• timeout : Le temps maximum (en millisecondes) que vous êtes prêt à attendre pour obtenir la position.
• maximumAge : La durée de validité (en millisecondes) d’une position mise en cache. Si vous mettez 0, le navigateur calculera systématiquement une nouvelle position.

const optionsDeLocalisation = {
    enableHighAccuracy: true, // Demande une haute précision
    timeout: 10000,           // Abandonne après 10 secondes
    maximumAge: 0             // Refuse les positions en cache
};

navigator.geolocation.getCurrentPosition(
    enCasDeSucces, 
    enCasDErreur, 
    optionsDeLocalisation
);

Suivre les déplacements en temps réel

Si vous développez une application de navigation ou de suivi sportif, obtenir la position une seule fois ne suffit pas. L’API propose la méthode watchPosition pour suivre la JavaScript position de l’utilisateur en continu.

Utiliser watchPosition et clearWatch

Le fonctionnement est identique à getCurrentPosition, mais la fonction de succès sera appelée à chaque fois que la position de l’appareil change. Cette méthode retourne un identifiant unique qui permet d’arrêter le suivi ultérieurement.

// Démarrer le suivi
const idSuivi = navigator.geolocation.watchPosition(
    (position) => {
        console.log(`Nouvelle position : ${position.coords.latitude}, ${position.coords.longitude}`);
    },
    enCasDErreur,
    optionsDeLocalisation
);

// Arrêter le suivi (par exemple, lors d'un clic sur un bouton "Stop")
function arreterSuivi() {
    navigator.geolocation.clearWatch(idSuivi);
    console.log("Suivi de position arrêté.");
}

Exemple complet et intégration HTML

Pour lier toutes ces notions, voici un exemple concret. Nous allons créer un bouton qui, au clic, demande la position de l’utilisateur et affiche le résultat directement dans la page Web.

Le code HTML

Nous préparons un bouton d’action et un paragraphe pour afficher le résultat ou les erreurs.

<button id="btn-localiser">Où suis-je ?</button>
<p id="affichage-resultat">Cliquez sur le bouton pour obtenir votre position.</p>

Le code JavaScript associé

Nous ajoutons un écouteur d’événement sur notre bouton pour déclencher la géolocalisation.

const btnLocaliser = document.getElementById("btn-localiser");
const affichageResultat = document.getElementById("affichage-resultat");

btnLocaliser.addEventListener("click", () => {
    // Vérification de la compatibilité
    if (!navigator.geolocation) {
        affichageResultat.textContent = "Votre navigateur ne supporte pas la géolocalisation.";
        return;
    }

    affichageResultat.textContent = "Recherche de votre position en cours...";

    // Définition des callbacks
    const succes = (position) => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        affichageResultat.innerHTML = `Latitude : <strong>${lat}</strong> <br> Longitude : <strong>${lng}</strong>`;
    };

    const erreur = (err) => {
        affichageResultat.textContent = `Impossible de vous localiser. Erreur : ${err.message}`;
    };

    // Lancement de la requête
    navigator.geolocation.getCurrentPosition(succes, erreur, { enableHighAccuracy: true });
});

Avec ce script, l’utilisateur garde le contrôle : la demande n’est initiée que lorsqu’il clique délibérément sur le bouton. C’est une excellente pratique d’expérience utilisateur (UX) pour éviter de bloquer la navigation avec des pop-ups de permission inattendues dès le chargement de la page.