DrawingManager de Google Maps et dépréciations de l'API : guide de migration 2026

En dix-huit mois, Google a déprécié quatre éléments très utilisés de la Maps JavaScript API. Deux d'entre eux, la Heatmap Layer et la Drawing Library, sont indisponibles depuis mai 2026. Les deux autres, DirectionsService et DistanceMatrixService, sont Legacy et dépréciés, mais fonctionnent encore et n'ont pas de date d'arrêt.

Ce guide présente le statut actuel de chacun, avec des liens vers les pages de Google, et montre comment les remplacer. Quand le remplaçant vient de MapAtlas, le code utilise nos vrais endpoints et formats de réponse.

Ce qui est déprécié et ce qui fonctionne encore

Sources : dépréciations de Google Maps Platform, les notes de version de la Maps JavaScript API et la page des produits Legacy.

Legacy a un sens précis. Selon Google, un service Legacy ne reçoit plus de nouvelles fonctionnalités et ne peut pas être activé dans un nouveau projet Cloud, mais il reste pris en charge dans les projets existants. Google s'engage à un préavis d'au moins 12 mois avant de le retirer, et la note de version qui a déprécié DirectionsService et DistanceMatrixService précise que leur arrêt n'est pas prévu et que les régressions majeures seront encore corrigées. Le même passage en Legacy, le 1er mars 2025, a concerné les services web Directions API et Distance Matrix API, la Places API et le JavaScript Places Service.

Ce qui casse

Ce code échoue aujourd'hui sur les versions actuelles de la Maps JavaScript API :

// Removed in 2026: these constructors no longer work
const heatmap = new google.maps.visualization.HeatmapLayer({ data: points });
const drawingManager = new google.maps.drawing.DrawingManager();

Ce code fonctionne encore dans les projets existants, mais il est déprécié et ne fonctionne pas dans un nouveau projet Cloud :

// Legacy and deprecated, no shutdown date yet
const directionsService = new google.maps.DirectionsService();
const distanceMatrixService = new google.maps.DistanceMatrixService();

Si une carte de chaleur ou un outil de dessin de votre site a cessé de fonctionner en mai 2026, voici la cause. Corrigez cela en premier. Planifiez ensuite la migration du calcul d'itinéraire, avant que Google n'annonce une date.

Les remplaçants proposés par Google

Pour le calcul d'itinéraire, Google propose deux voies, et aucune ne vous oblige à déplacer la logique sur un serveur :

• Dans le navigateur : la bibliothèque Routes de la Maps JavaScript API. La classe Route remplace DirectionsService et la classe RouteMatrix remplace DistanceMatrixService.
• Sur un serveur : la Routes API, un service REST avec les méthodes Compute Routes et Compute Route Matrix.

Pour la visualisation, Google ne fournit plus d'option maison. Sa page sur la carte de chaleur renvoie vers deck.gl, et sa page des dépréciations cite Terra Draw pour le dessin.

Liste de contrôle de la migration

1. Auditez votre code

Recherchez les classes concernées :

# Find all files using deprecated Google Maps services
grep -rn "DirectionsService\|DistanceMatrixService\|DirectionsRenderer\|HeatmapLayer\|DrawingManager" \
  --include="*.js" --include="*.ts" --include="*.tsx" --include="*.jsx" src/

Notez chaque fichier et chaque composant qui les utilise, et précisez si l'appel s'exécute dans le navigateur ou sur un serveur.

2. Documentez l'usage de chaque service

Pour chaque usage, notez :

• Modes de transport (voiture, marche, vélo, transports en commun)
• Points de passage (simple trajet de A à B ou itinéraire à plusieurs arrêts)
• Champs de réponse lus (distance, durée, polyligne, étapes, tarif)
• Volume (requêtes par jour et par mois, pour estimer les coûts)
• Exigences de latence (temps réel pour l'utilisateur ou traitement par lots)

3. Choisissez une cible

Option A : rester chez Google. Passez aux classes Route et RouteMatrix ou à la Routes API. Vérifiez les champs utilisés dans les guides de migration, car les formats de réponse diffèrent de ceux des classes Legacy.

Option B : changer de fournisseur. Vous réécrivez l'intégration de toute façon : comparez les fournisseurs sur les exigences de l'étape 2.

4. Faites tourner l'ancien et le nouveau en parallèle

Ne migrez pas sur place. Faites tourner les deux implémentations pendant une période et comparez distance, durée et latence sur vos vrais itinéraires avant de basculer.

5. Adaptez la gestion des erreurs

Les classes Legacy signalaient les erreurs par une valeur de statut dans un callback. Les remplaçants REST renvoient des codes HTTP et des corps d'erreur, votre gestion des erreurs doit donc changer.

Remplacer chaque service par MapAtlas

Les endpoints de calcul d'itinéraire de MapAtlas sont des services REST sur gateway.mapmetrics-atlas.net, décrits dans la documentation de l'API MapAtlas. Ils attendent un token en paramètre de requête : appelez-les donc depuis votre backend.

De DirectionsService à la Directions API de MapAtlas

Avant (Google, Legacy) :

const directionsService = new google.maps.DirectionsService();

directionsService.route(
  {
    origin: { lat: 52.52, lng: 13.405 },
    destination: { lat: 48.8566, lng: 2.3522 },
    travelMode: google.maps.TravelMode.DRIVING,
    waypoints: [
      { location: { lat: 50.9375, lng: 6.9603 }, stopover: true }
    ],
  },
  (result, status) => {
    if (status === "OK") {
      const route = result.routes[0];
      console.log("Distance:", route.legs[0].distance.text);
      console.log("Duration:", route.legs[0].duration.text);
    }
  }
);

Après (Directions API de MapAtlas) :

const response = await fetch(
  `https://gateway.mapmetrics-atlas.net/directions/?token=${process.env.MAPATLAS_API_KEY}`,
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      // Ordered stops: origin, waypoints, destination
      locations: [
        { lat: 52.52, lon: 13.405 },
        { lat: 50.9375, lon: 6.9603 },
        { lat: 48.8566, lon: 2.3522 },
      ],
      costing: "auto", // auto, bicycle, pedestrian, bus, truck, taxi, motor_scooter
      units: "kilometers",
    }),
  }
);

const { trip } = await response.json();
console.log("Distance (km):", trip.summary.length);
console.log("Duration (s):", trip.summary.time);
// Each leg carries its geometry as an encoded polyline (precision 6)
const shapes = trip.legs.map((leg) => leg.shape);

Principales différences :

• Appel REST au lieu d'une classe JavaScript, effectué depuis votre backend.
• Les points de passage sont les entrées du milieu de locations.
• Réponse de forme différente. Les totaux sont dans trip.summary et chaque tronçon porte une polyligne encodée dans shape. Décodez-la avant de tracer l'itinéraire (voir l'exemple de backend plus bas).

De DistanceMatrixService à la Matrix API de MapAtlas

La Matrix API de MapAtlas renvoie le temps de trajet et la distance pour chaque paire origine et destination en un seul appel. Notre endpoint limite chaque paire à 400 km de distance routière, c'est pourquoi l'exemple utilise des lieux autour de Berlin.

Avant (Google, Legacy) :

const service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
  {
    origins: [
      { lat: 52.52, lng: 13.405 },
      { lat: 52.3906, lng: 13.0645 },
    ],
    destinations: [
      { lat: 51.3397, lng: 12.3731 },
      { lat: 51.0504, lng: 13.7373 },
    ],
    travelMode: google.maps.TravelMode.DRIVING,
  },
  (response, status) => {
    if (status === "OK") {
      response.rows.forEach((row, i) => {
        row.elements.forEach((element, j) => {
          console.log(`Origin ${i} -> Dest ${j}:`,
            element.distance.text, element.duration.text);
        });
      });
    }
  }
);

Après (Matrix API de MapAtlas) :

const response = await fetch(
  `https://gateway.mapmetrics-atlas.net/matrix/?token=${process.env.MAPATLAS_API_KEY}`,
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      sources: [
        { lat: 52.52, lon: 13.405 },
        { lat: 52.3906, lon: 13.0645 },
      ],
      targets: [
        { lat: 51.3397, lon: 12.3731 },
        { lat: 51.0504, lon: 13.7373 },
      ],
      costing: "auto",
      units: "kilometers",
    }),
  }
);

const data = await response.json();

// One row per source, one cell per target
data.sources_to_targets.forEach((row: any[], i: number) => {
  row.forEach((cell, j) => {
    console.log(`Origin ${i} -> Dest ${j}:`, cell.distance, "km", cell.time, "s");
  });
});

La grille correspond aux rows et elements de Google. Les distances arrivent sous forme de nombres dans l'unité demandée et les durées en secondes : le formatage vous revient.

Remplacer la Heatmap Layer

Option 1 : une couche de chaleur MapLibre GL JS (open source)

import maplibregl from "maplibre-gl";

const map = new maplibregl.Map({
  container: "map",
  style: "https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_ACCOUNT_ID/mapstyle.json&token=YOUR_API_KEY",
  center: [13.405, 52.52],
  zoom: 10,
});

map.on("load", () => {
  map.addSource("heat-data", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: heatmapPoints.map((point) => ({
        type: "Feature",
        geometry: { type: "Point", coordinates: [point.lng, point.lat] },
        properties: { weight: point.weight },
      })),
    },
  });

  map.addLayer({
    id: "heatmap-layer",
    type: "heatmap",
    source: "heat-data",
    paint: {
      "heatmap-weight": ["get", "weight"],
      "heatmap-intensity": 1,
      "heatmap-radius": 20,
      "heatmap-opacity": 0.7,
    },
  });
});

La carte de chaleur est rendue par la bibliothèque cartographique elle-même, sans service supplémentaire.

Option 2 : la HeatmapLayer de deck.gl, que suggère la documentation de Google :

import { HeatmapLayer } from "@deck.gl/aggregation-layers";

const heatmapLayer = new HeatmapLayer({
  data: heatmapPoints,
  getPosition: (d) => [d.lng, d.lat],
  getWeight: (d) => d.weight,
  radiusPixels: 30,
});

Les deux fonctionnent. MapLibre GL JS lit directement les styles MapAtlas, et deck.gl se superpose à n'importe quel fond de carte.

Remplacer la Drawing Library

DrawingManager permettait aux utilisateurs de dessiner des marqueurs, des lignes, des cercles et des polygones sur la carte. Terra Draw, la bibliothèque citée par la page des dépréciations de Google, propose les mêmes modes et dispose d'adaptateurs pour plusieurs bibliothèques cartographiques, dont Google Maps et MapLibre GL JS. Les formes sont renvoyées en GeoJSON, que vous pouvez stocker ou envoyer tel quel à un service de géorepérage ou d'isochrones.

Comparaison des coûts

Chez Google, les prix catalogue sont identiques pour les SKU Legacy de calcul d'itinéraire et pour les SKU Essentials de leurs remplaçants. Tous les prix ci-dessous proviennent de la page tarifaire de Google Maps Platform et de la page tarifaire de MapAtlas, vérifiées le 26 septembre 2026.

Google facture en dollars américains et MapAtlas en euros : convertissez avant de comparer. Les deux baissent leurs tarifs avec le volume. Exemple de calcul pour 500 000 requêtes d'itinéraire par mois :

• Google Compute Routes Essentials : 10 000 gratuites, 90 000 à 5,00 $ et 400 000 à 4,00 $, soit 2 050 $.
• Navigation MapAtlas : 100 000 gratuites et 400 000 à 1,53 €, soit environ 610 €.

Exemple complet : route de backend et carte

Ce schéma garde votre clé d'API sur le serveur et n'envoie au navigateur que la géométrie de l'itinéraire.

Route d'API côté backend (Next.js)

// app/api/directions/route.ts
import { NextRequest, NextResponse } from "next/server";

// Decode an encoded polyline with precision 6 into [lon, lat] pairs
function decodePolyline6(str: string): [number, number][] {
  const coords: [number, number][] = [];
  let index = 0, lat = 0, lng = 0;
  while (index < str.length) {
    for (const axis of [0, 1]) {
      let result = 0, shift = 0, byte: number;
      do {
        byte = str.charCodeAt(index++) - 63;
        result |= (byte & 0x1f) << shift;
        shift += 5;
      } while (byte >= 0x20);
      const delta = result & 1 ? ~(result >> 1) : result >> 1;
      if (axis === 0) lat += delta; else lng += delta;
    }
    coords.push([lng / 1e6, lat / 1e6]);
  }
  return coords;
}

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const [oLat, oLon] = searchParams.get("origin")!.split(",").map(Number);
  const [dLat, dLon] = searchParams.get("destination")!.split(",").map(Number);

  const response = await fetch(
    `https://gateway.mapmetrics-atlas.net/directions/?token=${process.env.MAPATLAS_API_KEY}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        locations: [{ lat: oLat, lon: oLon }, { lat: dLat, lon: dLon }],
        costing: "auto",
        units: "kilometers",
      }),
    }
  );
  if (!response.ok) {
    return NextResponse.json({ error: "routing failed" }, { status: 502 });
  }

  const { trip } = await response.json();
  const coordinates = trip.legs.flatMap((leg: { shape: string }) => decodePolyline6(leg.shape));
  return NextResponse.json({
    coordinates,
    distanceKm: trip.summary.length,
    durationS: trip.summary.time,
  });
}

Composant de carte (React et MapLibre GL JS)

import { useEffect, useRef } from "react";
import maplibregl from "maplibre-gl";

function DirectionsMap({ origin, destination }: {
  origin: { lat: number; lng: number };
  destination: { lat: number; lng: number };
}) {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const map = new maplibregl.Map({
      container: mapRef.current!,
      style: "https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_ACCOUNT_ID/mapstyle.json&token=YOUR_API_KEY",
      center: [origin.lng, origin.lat],
      zoom: 7,
    });

    map.on("load", async () => {
      const res = await fetch(
        "/api/directions?" +
          new URLSearchParams({
            origin: `${origin.lat},${origin.lng}`,
            destination: `${destination.lat},${destination.lng}`,
          })
      );
      if (!res.ok) return;
      const { coordinates } = await res.json();

      map.addSource("route", {
        type: "geojson",
        data: {
          type: "Feature",
          geometry: { type: "LineString", coordinates },
          properties: {},
        },
      });

      map.addLayer({
        id: "route-line",
        type: "line",
        source: "route",
        paint: { "line-color": "#4A90D9", "line-width": 5 },
      });

      const bounds = coordinates.reduce(
        (b: maplibregl.LngLatBounds, coord: [number, number]) => b.extend(coord),
        new maplibregl.LngLatBounds(coordinates[0], coordinates[0])
      );
      map.fitBounds(bounds, { padding: 50 });
    });

    return () => map.remove();
  }, [origin, destination]);

  return <div ref={mapRef} style={{ width: "100%", height: "400px" }} />;
}

Tester la migration

Étape 1 : comparez les deux implémentations

Pendant une période de test, appelez l'ancien et le nouveau service avec les mêmes requêtes. Journalisez la distance et la durée des deux et examinez les écarts sur vos vrais itinéraires, en particulier les ferries, les péages et les routes à accès restreint.

Étape 2 : utilisez un feature flag

Placez le fournisseur derrière un flag pour pouvoir revenir en arrière sans déploiement :

const useMapAtlasDirections = process.env.FEATURE_MAPATLAS_DIRECTIONS === "true";

const directions = useMapAtlasDirections
  ? await fetchMapAtlasDirections(origin, destination)
  : await fetchGoogleDirections(origin, destination);

Étape 3 : surveillez les taux d'erreur

Après la bascule, surveillez :

• Les taux de HTTP 4xx et 5xx de la nouvelle API
• Les variations de latence
• Les champs manquants que lit votre interface
• Les écarts d'itinéraire sur les cas limites comme les ferries, les autoroutes à péage et les zones restreintes

Étape 4 : test de charge avant la mise en production

Si votre trafic connaît des pics, par exemple lors du dispatch matinal d'une plateforme logistique, testez la nouvelle API à deux fois votre volume de pointe avant de vous y fier.

Que faire maintenant

1. Si vous chargez encore la Heatmap Layer ou la Drawing Library : remplacez-les d'abord. Elles ne fonctionnent plus sur les versions actuelles de la Maps JavaScript API.
2. Auditez le code de calcul d'itinéraire : repérez chaque appel à DirectionsService, DirectionsRenderer et DistanceMatrixService.
3. Choisissez le remplaçant : les classes Route et RouteMatrix, la Routes API ou un autre fournisseur.
4. Migrez un service à la fois, derrière un feature flag, et comparez les résultats avant de basculer.
5. Surveillez la page des dépréciations de Google au cas où une date d'arrêt serait annoncée. Google s'est engagé à un préavis d'au moins 12 mois pour les services Legacy.

Pour essayer les API de calcul d'itinéraire de MapAtlas, créez un compte gratuit et consultez la documentation de l'API. Pour de l'aide sur une migration, passez par la page de contact.