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 à l'aide de la fonctionnalité de géolocalisation HTML5 de votre navigateur avec l'API Maps JavaScript. La 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. l'autorisation d'accéder aux données de localisation de l'appareil. Si la requête échoue, cela peut être dû au autorisations d'accéder à la position ont été refusées, ou parce que l'appareil n'a pas pu déterminer sa position. Cette fonctionnalité n'est disponible que dans les contextes sécurisés (HTTPS), dans 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.

TypeScript

// 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
 <ph type="x-smartling-placeholder">

JavaScript

// 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
 <ph type="x-smartling-placeholder">
Voir l'exemple

Essayer l'exemple

Qu'est-ce que la géolocalisation ?

La géolocalisation est l'identification de l'emplacement géographique d'un appareil informatique. à l'aide de divers mécanismes de collecte de données. La plupart des services de géolocalisation utilisent généralement des adresses de routage 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 l'emplacement de l'appareil via le W3C API navigator.geolocation.

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