Géolocalisation HTML5 avec l'API Google Maps

Coupler la géolocalisation HTML5 du navigateur avec une carte interactive permet d'afficher la position exacte de l'internaute sur un fond cartographique. L'API Google Maps reste une référence pour ce type d'usage, mais elle impose désormais une clé et un compte de facturation. Voici comment la mettre en place, étape par étape, ainsi qu'une alternative entièrement gratuite avec Leaflet et OpenStreetMap.

Principe

Le mécanisme repose sur deux briques indépendantes qui se combinent. La première récupère les coordonnées de l'utilisateur grâce à navigator.geolocation, comme expliqué dans notre tutoriel sur la géolocalisation HTML5. La seconde affiche ces coordonnées sur une carte interactive que l'utilisateur peut déplacer et zoomer.

Le déroulé logique est toujours le même :

• charger la librairie cartographique (Google Maps ou une alternative),
• créer une carte centrée sur une position par défaut,
• demander la position réelle au navigateur,
• recentrer la carte et poser un marqueur sur cette position.

Charger l'API Google Maps

L'API Google Maps JavaScript se charge via une balise <script> pointant vers les serveurs de Google. Deux paramètres sont indispensables : la clé API (key) et une fonction de callback appelée automatiquement une fois la librairie chargée. Le chargement étant asynchrone, le callback garantit que google.maps existe avant d'être utilisé.

<div id="map" style="height: 400px;"></div>

<script>
  function initMap() {
    // code de création de la carte ici
  }
</script>

<script async
  src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE_API&callback=initMap">
</script>

Afficher une carte de base

Une carte Google Maps a besoin d'un élément conteneur dans la page, ici une <div id="map"> à laquelle on donne une hauteur en CSS. Sans hauteur explicite, la carte reste invisible. On instancie ensuite l'objet carte avec new google.maps.Map, en lui passant le conteneur et un objet d'options.

Les deux options de base sont center, qui attend un couple latitude/longitude, et zoom, un entier de 0 (planète entière) à 21 (niveau rue).

function initMap() {
  const carte = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 48.8566, lng: 2.3522 }, // Paris par défaut
    zoom: 12
  });
}

À ce stade, la carte s'affiche centrée sur Paris. Il reste à la recentrer sur la position réelle de l'internaute.

Centrer la carte sur la position

On combine maintenant la carte avec navigator.geolocation.getCurrentPosition. Cette méthode prend une fonction de succès, qui reçoit un objet position contenant coords.latitude et coords.longitude, et une fonction d'erreur appelée si l'utilisateur refuse ou si la localisation échoue.

function initMap() {
  const carte = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 48.8566, lng: 2.3522 },
    zoom: 12
  });

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function (position) {
        const moi = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        carte.setCenter(moi);
        carte.setZoom(15);
      },
      function (erreur) {
        console.log("Position indisponible : " + erreur.message);
      }
    );
  }
}

La méthode setCenter déplace le centre de la carte sans la recréer, et setZoom rapproche la vue. Le navigateur affichera une demande d'autorisation : tant que l'utilisateur n'a pas accepté, la carte reste sur sa position par défaut.

Ajouter un marqueur

Un marqueur matérialise visuellement la position sur la carte. On le crée avec new google.maps.Marker, en lui passant la position (position), la carte cible (map) et éventuellement un title affiché au survol.

navigator.geolocation.getCurrentPosition(function (position) {
  const moi = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  carte.setCenter(moi);
  carte.setZoom(15);

  new google.maps.Marker({
    position: moi,
    map: carte,
    title: "Vous êtes ici"
  });
});

Alternatives gratuites

Si la contrainte de facturation pose problème, Leaflet associé aux tuiles OpenStreetMap offre une solution totalement gratuite et sans clé API. Leaflet est une librairie open source légère, les tuiles OpenStreetMap sont libres, à condition de citer la source et de rester sur un usage raisonnable.

La logique reste identique : on charge la librairie, on crée une carte, puis on récupère la position HTML5 pour la recentrer et y poser un marqueur.

<link rel="stylesheet"
  href="https://unpkg.com/leaflet/dist/leaflet.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<div id="map" style="height: 400px;"></div>

<script>
  const carte = L.map("map").setView([48.8566, 2.3522], 12);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap"
  }).addTo(carte);

  navigator.geolocation.getCurrentPosition(function (position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    carte.setView([lat, lng], 15);
    L.marker([lat, lng]).addTo(carte)
      .bindPopup("Vous êtes ici").openPopup();
  });
</script>

On retrouve les mêmes concepts qu'avec Google Maps : un conteneur, une carte centrée, une couche de tuiles, et un marqueur posé sur la position renvoyée par la géolocalisation HTML5. La différence majeure est l'absence de clé, de compte de facturation et de coût, ce qui en fait un excellent choix pour les sites personnels et les projets d'apprentissage.