Les dépréciations de l'API Google Maps arrivent en mai 2026 : checklist de migration pour les développeurs

Google resserre sa Maps Platform depuis plusieurs années, mais la vague de dépréciations de mai 2026 est la plus impactante à ce jour. Quatre fonctionnalités largement utilisées vont être supprimées de la Maps JavaScript API : le Heatmap Layer, la Drawing Library, DirectionsService et DistanceMatrixService. Si votre application s'appuie sur l'une d'entre elles, vous disposez de quelques semaines pour migrer avant que votre code cesse de fonctionner.

Il ne s'agit pas d'une dépréciation souple où les anciens endpoints persistent pendant des années. Google a fixé des dates de suppression fermes, et la console développeur affiche déjà des avertissements. Ce guide couvre précisément ce qui change, pourquoi Google opère ces changements, et comment migrer chaque service avec des exemples de code fonctionnels. Si vous avez besoin d'un remplacement direct, nous vous montrons comment les APIs MapAtlas correspondent à chaque service Google déprécié.

Ce qui est déprécié et quand

Voici la chronologie complète des services concernés :

Le détail crucial : Google ne supprime pas le routage et les calculs de distance dans leur intégralité. Il supprime les classes JavaScript côté client que les développeurs utilisent depuis plus d'une décennie et impose la migration vers la nouvelle Routes API, un endpoint REST côté serveur. Il ne s'agit pas d'un simple changement de version, mais d'un changement architectural qui déplace la logique de routage du navigateur vers votre backend.

Ce qui cesse de fonctionner

Si votre codebase contient l'un des éléments suivants, il échouera après la date de suppression :

// All of these will stop working in May 2026
const directionsService = new google.maps.DirectionsService();
const distanceMatrixService = new google.maps.DistanceMatrixService();
const heatmap = new google.maps.visualization.HeatmapLayer({ data: points });
const drawingManager = new google.maps.drawing.DrawingManager();

Après la suppression, ces constructeurs lèveront des erreurs. Il n'existe aucun comportement de repli, aucune dégradation gracieuse. La carte se chargera, mais toute fonctionnalité dépendant de ces classes cessera de fonctionner.

Pourquoi Google impose ces changements

La justification officielle de Google est la performance et la modernisation. La Routes API, qui remplace DirectionsService et DistanceMatrixService, prend en charge des fonctionnalités plus récentes comme le routage écologique, le routage pour véhicules à deux roues et l'estimation des péages, que les classes JavaScript héritées ne peuvent pas accommoder.

Le véritable moteur est le contrôle tarifaire. En déplaçant le routage vers une REST API côté serveur, Google obtient une facturation plus fine et un suivi de l'utilisation plus précis. Le DirectionsService JavaScript permettait des schémas de batching côté client que Google avait plus de mal à mesurer avec précision. La Routes API garantit que chaque requête transite par un endpoint mesuré.

Pour le Heatmap Layer et la Drawing Library, Google pousse les développeurs vers son Extended Component Library et des outils de visualisation tiers comme deck.gl. C'est la manifestation d'un schéma plus large : Google conserve le rendu des tuiles cartographiques en interne et externalise tout le reste à l'écosystème.

L'impact pratique pour les développeurs se traduit par davantage d'infrastructure backend, plus de clés API à gérer, et dans la plupart des cas, des coûts par requête plus élevés sur les nouveaux niveaux tarifaires.

Checklist de migration

Avant d'écrire le moindre code de migration, parcourez cette checklist :

1. Auditez votre codebase

Recherchez dans votre codebase les références aux classes dépréciées :

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

Documentez chaque fichier et composant utilisant ces services. Notez si les appels se produisent côté client (navigateur) ou dans un contexte rendu côté serveur, comme les API routes Next.js.

2. Identifiez vos patterns d'utilisation

Pour chaque usage, documentez :

• Modes de déplacement utilisés (driving, walking, cycling, transit)
• Support des waypoints (simple A-vers-B ou routes multi-étapes)
• Champs de réponse consommés (distance, durée, polyline, étapes, tarif)
• Volume (requêtes par jour/mois, pour l'estimation des coûts)
• Exigences de latence (temps réel côté utilisateur ou traitement en batch)

3. Choisissez votre cible de migration

Deux options s'offrent à vous :

Option A : Rester chez Google. Migrer des classes JavaScript dépréciées vers la nouvelle Google Routes API (REST). Cela nécessite des modifications backend, de nouvelles permissions de clé API et une mise à jour de la facturation.

Option B : Changer de fournisseur. Migrer vers une API de routage tierce. C'est le bon moment pour évaluer les alternatives, puisque vous réécrivez de toute façon le code d'intégration.

4. Mettez en place un environnement parallèle

Ne migrez jamais en place. Faites tourner l'ancienne et la nouvelle implémentation en parallèle pendant au moins deux semaines, en comparant les résultats en termes de précision et de latence avant de basculer.

5. Mettez à jour la gestion des erreurs

Les services dépréciés retournaient les erreurs via des fonctions callback. Les remplacements REST retournent des codes de statut HTTP. Votre logique de gestion des erreurs doit être adaptée en conséquence.

Guide de remplacement API par API

DirectionsService vers MapAtlas Directions API

Avant (Google, déprécié) :

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 (MapAtlas Directions API) :

const response = await fetch(
  "https://api.mapatlas.com/v1/directions?" +
    new URLSearchParams({
      origin: "52.52,13.405",
      destination: "48.8566,2.3522",
      waypoints: "50.9375,6.9603",
      mode: "driving",
      key: process.env.MAPATLAS_API_KEY!,
    })
);

const data = await response.json();

if (data.status === "OK") {
  const leg = data.routes[0].legs[0];
  console.log("Distance:", leg.distance.text);
  console.log("Duration:", leg.duration.text);
  // Polyline for map rendering
  const polyline = data.routes[0].overview_polyline;
}

Différences clés :

• Endpoint REST plutôt qu'une classe JavaScript. Les appels partent de votre backend, pas du navigateur.
• Authentification simplifiée. Une seule clé API dans le query string ou le header.
• Même structure de réponse. Routes, legs, distance, duration et polyline sont tous présents.

DistanceMatrixService vers MapAtlas Matrix API

Avant (Google, déprécié) :

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

service.getDistanceMatrix(
  {
    origins: [
      { lat: 52.52, lng: 13.405 },
      { lat: 48.1351, lng: 11.582 },
    ],
    destinations: [
      { lat: 48.8566, lng: 2.3522 },
      { lat: 51.5074, lng: -0.1278 },
    ],
    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 (MapAtlas Matrix API) :

const response = await fetch("https://api.mapatlas.com/v1/matrix", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.MAPATLAS_API_KEY}`,
  },
  body: JSON.stringify({
    origins: [
      { lat: 52.52, lng: 13.405 },
      { lat: 48.1351, lng: 11.582 },
    ],
    destinations: [
      { lat: 48.8566, lng: 2.3522 },
      { lat: 51.5074, lng: -0.1278 },
    ],
    mode: "driving",
  }),
});

const data = await response.json();

data.rows.forEach((row: any, i: number) => {
  row.elements.forEach((element: any, j: number) => {
    console.log(`Origin ${i} -> Dest ${j}:`,
      element.distance.text, element.duration.text);
  });
});

La structure de réponse est quasi identique. Le changement principal consiste à passer d'une API navigateur basée sur des callbacks à une API serveur basée sur des promesses.

Remplacement du Heatmap Layer

Pour la visualisation de cartes de chaleur, le chemin de migration dépend de vos besoins :

Option 1 : MapLibre GL JS avec un heatmap layer (open source)

import maplibregl from "maplibre-gl";

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.mapatlas.com/v1/styles/streets?key=YOUR_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,
    },
  });
});

Cette approche vous donne un contrôle total sur le rendu de la carte de chaleur et ne dépend pas des serveurs de tuiles de Google.

Option 2 : deck.gl HeatmapLayer (la recommandation officielle de Google)

import { Deck } from "@deck.gl/core";
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 options fonctionnent. MapLibre GL JS s'intègre proprement avec les styles de tuiles MapAtlas, tandis que deck.gl peut se superposer à n'importe quelle carte de base.

Comparaison des coûts : Google Routes API vs. MapAtlas

Migrer vers la propre Routes API de Google ne se limite pas à un changement de code. Cela s'accompagne d'une nouvelle tarification :

Pour 100 000 requêtes de routage par mois :

• Google Routes API : environ 500 à 1 000 $ (selon les fonctionnalités utilisées)
• MapAtlas Directions API : environ 150 à 250 $

Les économies s'accumulent rapidement pour les applications combinant routage, géocodage et calculs de distance. Une plateforme logistique traitant 500 000 éléments de matrice par mois paierait environ 2 500 $ chez Google contre 500 $ chez MapAtlas.

Pour le détail complet des tarifs, consultez les tarifs MapAtlas.

Exemples complets de migration : avant/après

Voici un exemple complet de migration pour un composant React affichant des itinéraires de conduite sur une carte.

Avant : Google Maps DirectionsService dans React

import { useEffect, useRef } from "react";

function DirectionsMap({ origin, destination }: {
  origin: google.maps.LatLngLiteral;
  destination: google.maps.LatLngLiteral;
}) {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const map = new google.maps.Map(mapRef.current!, {
      center: origin,
      zoom: 7,
    });

    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);

    const directionsService = new google.maps.DirectionsService();
    directionsService.route(
      {
        origin,
        destination,
        travelMode: google.maps.TravelMode.DRIVING,
      },
      (result, status) => {
        if (status === "OK" && result) {
          directionsRenderer.setDirections(result);
        }
      }
    );
  }, [origin, destination]);

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

Après : MapAtlas Directions API avec 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://api.mapatlas.com/v1/styles/streets?key=YOUR_KEY",
      center: [origin.lng, origin.lat],
      zoom: 7,
    });

    map.on("load", async () => {
      // Fetch directions from your backend (or directly if CORS allows)
      const res = await fetch(
        `/api/directions?` +
          new URLSearchParams({
            origin: `${origin.lat},${origin.lng}`,
            destination: `${destination.lat},${destination.lng}`,
            mode: "driving",
          })
      );
      const data = await res.json();

      if (data.routes?.[0]) {
        const coordinates = data.routes[0].geometry.coordinates;

        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,
          },
        });

        // Fit map to route bounds
        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" }} />;
}

Route API backend (Next.js)

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

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const origin = searchParams.get("origin");
  const destination = searchParams.get("destination");
  const mode = searchParams.get("mode") || "driving";

  const response = await fetch(
    `https://api.mapatlas.com/v1/directions?` +
      new URLSearchParams({
        origin: origin!,
        destination: destination!,
        mode,
        key: process.env.MAPATLAS_API_KEY!,
      })
  );

  const data = await response.json();
  return NextResponse.json(data);
}

Ce schéma maintient votre clé API côté serveur et n'expose que la géométrie de l'itinéraire au client.

Comment tester votre migration avant l'échéance

Étape 1 : Exécutez les deux APIs en parallèle

Pendant les deux semaines précédant le basculement, appelez à la fois l'ancien service Google et le nouveau remplacement pour chaque requête. Enregistrez les deux réponses et comparez-les :

async function getDirectionsWithComparison(
  origin: string,
  destination: string
) {
  const [googleResult, mapatResult] = await Promise.all([
    fetchGoogleDirections(origin, destination),
    fetchMapAtlasDirections(origin, destination),
  ]);

  // Compare key metrics
  const distanceDelta = Math.abs(
    googleResult.distance - mapatResult.distance
  );
  const durationDelta = Math.abs(
    googleResult.duration - mapatResult.duration
  );

  console.log({
    route: `${origin} -> ${destination}`,
    googleDistance: googleResult.distance,
    mapatDistance: mapatResult.distance,
    distanceDeltaPercent: ((distanceDelta / googleResult.distance) * 100).toFixed(1),
    googleDuration: googleResult.duration,
    mapatDuration: mapatResult.duration,
    durationDeltaPercent: ((durationDelta / googleResult.duration) * 100).toFixed(1),
  });

  // Use MapAtlas result in production, Google as validation
  return mapatResult;
}

Étape 2 : Mettez en place des feature flags

Utilisez un feature flag pour contrôler quelle API votre application appelle. Cela vous permet un rollback instantané en cas de problème :

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 le basculement, surveillez :

• Taux d'erreurs HTTP 4xx/5xx de la nouvelle API
• Augmentations de latence (le nouveau fournisseur peut avoir des temps de réponse différents)
• Champs manquants dans les réponses dont votre UI dépend
• Précision des itinéraires pour les cas limites (ferry, routes à péage, zones restreintes)

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

Si votre application gère des pics de charge, comme une plateforme logistique lors du dispatch du matin, effectuez des tests de charge de la nouvelle API à 2x votre volume de pointe. MapAtlas propose un environnement sandbox pour les tests de charge sans facturation en production.

Calendrier : que faire cette semaine

Si vous n'avez pas encore commencé la migration, voici l'ordre de priorité :

1. Cette semaine : Auditez votre codebase. Identifiez chaque usage des quatre services dépréciés.
2. Semaine 2 : Créez un compte MapAtlas et obtenez des clés API. Le tier gratuit couvre 10 000 requêtes pour les tests.
3. Semaine 3 : Implémentez le remplacement pour votre service le plus critique (généralement DirectionsService).
4. Semaine 4 : Migrez les services restants et effectuez des tests en parallèle.
5. Avant l'échéance de mai : Basculez, supprimez les dépendances à l'API Google, mettez à jour la facturation.

La migration n'est pas optionnelle. Après mai 2026, les classes dépréciées seront supprimées de la Maps JavaScript API, et tout code les référençant lèvera des erreurs à l'exécution. Commencez maintenant et vous aurez le temps de tester correctement. Attendez la dernière semaine et vous corrigerez la production sous pression.

Pour tout support de migration, MapAtlas propose une assistance directe aux développeurs. Contactez-nous via la page de contact ou commencez par la documentation API pour évaluer les APIs de remplacement selon vos besoins.