Géolocalisation : afficher la position d'un utilisateur ou d'un appareil sur Maps

Présentation

Ce tutoriel explique comment afficher l'emplacement géographique d'un appareil sur une carte Google en utilisant la fonctionnalité HTML5 Geolocation de votre navigateur ainsi que l'API Maps JavaScript. L'emplacement géographique ne s'affiche que si l'utilisateur a autorisé le partage de position.

Lorsque l'utilisateur déclenche la requête de géolocalisation, il reçoit une invite du navigateur lui demandant d'autoriser l'accès aux données de localisation de l'appareil. Si la requête échoue, cela peut être dû au refus des autorisations d'accéder à la position ou à l'impossibilité de déterminer la position de l'appareil. Cette fonctionnalité n'est disponible que dans les contextes sécurisés (HTTPS), pour certains ou l'ensemble des navigateurs compatibles.

La carte ci-dessous permet d'identifier la position actuelle de l'appareil de l'utilisateur.

L'exemple ci-dessous montre tout le code dont vous avez besoin pour créer cette carte.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation.",
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Qu'est-ce que la géolocalisation ?

La géolocalisation est l'identification de l'emplacement géographique d'un appareil informatique au moyen de divers mécanismes de collecte de données. En règle générale, la plupart des services de géolocalisation utilisent des adresses de routage réseau ou des puces GPS internes pour déterminer cette position. L'API de géolocalisation est spécifique à chaque appareil. En d'autres termes, les navigateurs et appareils doivent être compatibles avec la géolocalisation pour pouvoir l'utiliser dans les applications Web.

Norme de géolocalisation W3C

Les applications qui souhaitent utiliser la géolocalisation doivent respecter la norme de géolocalisation W3C. Notez que l'exemple de code ci-dessus détermine la position de l'appareil via l'API W3C navigator.geolocation.

Les sites Web utilisent parfois les adresses IP pour détecter la position d'un appareil. Toutefois, cette information ne fournit qu'une estimation approximative de cette position. Les API conformes aux normes W3C sont les plus compatibles et les plus précises. Elles doivent donc être prioritaires par rapport aux autres méthodes de géolocalisation.