Las deprecaciones de la API de Google Maps llegan en mayo de 2026: checklist de migración para desarrolladores

Google lleva años ajustando su Maps Platform, pero la oleada de deprecaciones de mayo de 2026 es la más disruptiva hasta ahora. Cuatro funcionalidades muy utilizadas van a desaparecer de la Maps JavaScript API: Heatmap Layer, Drawing Library, DirectionsService y DistanceMatrixService. Si tu aplicación depende de alguna de ellas, tienes pocas semanas para migrar antes de que tu código deje de funcionar.

Esto no es una deprecación suave donde los endpoints antiguos se mantienen durante años. Google ha fijado fechas de eliminación definitivas, y la consola de desarrolladores ya está mostrando advertencias. Esta guía explica exactamente qué está cambiando, por qué lo hace Google, y cómo migrar cada servicio con ejemplos de código funcionales. Si necesitas un reemplazo directo, aquí te mostramos cómo las APIs de MapAtlas se corresponden con cada servicio deprecado de Google.

Qué se depreca y cuándo

Esta es la cronología completa de los servicios afectados:

El detalle clave: Google no está eliminando el routing ni los cálculos de distancia por completo. Está eliminando las clases JavaScript del lado del cliente que los desarrolladores llevan usando más de una década y forzando la migración a la nueva Routes API, un endpoint REST del lado del servidor. No es un simple cambio de versión. Es un cambio arquitectónico que traslada la lógica de routing del navegador a tu backend.

Qué se rompe

Si tu codebase contiene alguno de los siguientes elementos, fallará después de la fecha de eliminación:

// 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();

Después de la eliminación, estos constructores lanzarán errores. No hay comportamiento de fallback, no hay degradación elegante. El mapa cargará, pero cualquier funcionalidad que dependa de estas clases se romperá por completo.

Por qué Google fuerza estos cambios

La justificación oficial de Google es rendimiento y modernización. La Routes API, el reemplazo para DirectionsService y DistanceMatrixService, soporta funcionalidades más nuevas como routing eco-friendly, routing para vehículos de dos ruedas y estimación de peajes que las clases JavaScript heredadas no pueden acomodar.

El verdadero motivo es el control de precios. Al mover el routing a una REST API del lado del servidor, Google consigue una facturación más granular y un seguimiento más preciso del uso. El DirectionsService de JavaScript permitía patrones de batching en el cliente que a Google le resultaba más difícil medir con precisión. La Routes API garantiza que cada petición pase por un endpoint medido.

Para Heatmap Layer y Drawing Library, Google está empujando a los desarrolladores hacia su Extended Component Library y herramientas de visualización de terceros como deck.gl. Esto es parte de un patrón más amplio: Google se queda con el rendering de tiles del mapa y externaliza todo lo demás al ecosistema.

El impacto práctico para los desarrolladores es más infraestructura de backend, más API keys que gestionar, y en la mayoría de los casos, costes más altos por petición en los nuevos niveles de precios.

Checklist de migración

Antes de escribir código de migración, trabaja en esta checklist:

1. Audita tu codebase

Busca en tu codebase referencias a las clases deprecadas:

# 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/

Documenta cada archivo y componente que use estos servicios. Anota si las llamadas ocurren en el lado del cliente (navegador) o en un contexto renderizado en el servidor, como las API routes de Next.js.

2. Identifica tus patrones de uso

Para cada uso, documenta:

• Modos de viaje usados (driving, walking, cycling, transit)
• Soporte de waypoints (simple A-a-B, o rutas multi-parada)
• Campos de respuesta consumidos (distancia, duración, polilínea, pasos, tarifa)
• Volumen (peticiones por día/mes, para estimación de costes)
• Requisitos de latencia (tiempo real de cara al usuario, o procesamiento en batch)

3. Elige tu destino de migración

Tienes dos opciones:

Opción A: Quedarte con Google. Migrar de las clases JavaScript deprecadas a la nueva Google Routes API (REST). Esto requiere cambios en el backend, nuevos permisos de API key y actualización de la facturación.

Opción B: Cambiar de proveedor. Migrar a una API de routing de terceros. Es el momento ideal para evaluar alternativas, ya que de todas formas estás reescribiendo el código de integración.

4. Monta un entorno en paralelo

Nunca migres in-place. Ejecuta la implementación antigua y la nueva en paralelo durante al menos dos semanas, comparando resultados de precisión y latencia antes de hacer el cambio definitivo.

5. Actualiza el manejo de errores

Los servicios deprecados devolvían errores a través de funciones callback. Los reemplazos REST devuelven códigos de estado HTTP. Tu lógica de manejo de errores tiene que cambiar en consecuencia.

Guía de reemplazo API por API

DirectionsService a MapAtlas Directions API

Antes (Google, deprecado):

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

Despué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;
}

Diferencias clave:

• Endpoint REST en vez de una clase JavaScript. Las llamadas van desde tu backend, no desde el navegador.
• Autenticación más simple. Una API key en el query string o en el header.
• Misma estructura de respuesta. Routes, legs, distance, duration y polyline están todos presentes.

DistanceMatrixService a MapAtlas Matrix API

Antes (Google, deprecado):

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

Despué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 estructura de respuesta es prácticamente idéntica. El cambio principal es pasar de una API de navegador basada en callbacks a una API de servidor basada en promesas.

Reemplazo del Heatmap Layer

Para la visualización de heatmaps, el camino de migración depende de tus requisitos:

Opción 1: MapLibre GL JS con 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,
    },
  });
});

Esto te da control total sobre el rendering del heatmap y no depende de los servidores de tiles de Google.

Opción 2: deck.gl HeatmapLayer (la propia recomendación 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,
});

Ambas opciones funcionan. MapLibre GL JS se integra limpiamente con los estilos de tiles de MapAtlas, mientras que deck.gl puede superponerse sobre cualquier mapa base.

Comparativa de costes: Google Routes API vs. MapAtlas

Migrar a la propia Routes API de Google no es solo un cambio de código. Viene con nuevos precios:

Con 100.000 peticiones de routing al mes:

• Google Routes API: aprox. 500–1.000 $ (según las funcionalidades usadas)
• MapAtlas Directions API: aprox. 150–250 $

El ahorro se multiplica rápidamente en aplicaciones que combinan routing con geocoding y cálculos de distancia. Una plataforma logística que procesa 500.000 elementos de matriz al mes pagaría alrededor de 2.500 $ en Google frente a 500 $ en MapAtlas.

Para ver todos los detalles de precios, consulta los precios de MapAtlas.

Ejemplos completos de migración: antes y después

Un ejemplo completo de migración para un componente React que muestra indicaciones de conducción en un mapa.

Antes: Google Maps DirectionsService en 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" }} />;
}

Después: MapAtlas Directions API con 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" }} />;
}

API Route del 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);
}

Este patrón mantiene tu API key en el servidor y solo expone la geometría de la ruta al cliente.

Cómo testear tu migración antes del deadline

Paso 1: Ejecuta ambas APIs en paralelo

Durante las dos semanas previas al cambio, llama tanto al servicio de Google como al nuevo reemplazo para cada petición. Loguea ambas respuestas y compáralas:

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

Paso 2: Configura feature flags

Usa un feature flag para controlar qué API llama tu aplicación. Esto te permite hacer rollback instantáneo si encuentras problemas:

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

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

Paso 3: Monitoriza las tasas de error

Después de hacer el cambio, monitoriza:

• Tasas de errores HTTP 4xx/5xx de la nueva API
• Aumentos de latencia (el nuevo proveedor puede tener tiempos de respuesta diferentes)
• Campos faltantes en las respuestas de los que depende tu UI
• Precisión de rutas para casos extremos (rutas en ferry, carreteras de peaje, zonas restringidas)

Paso 4: Pruebas de carga antes del lanzamiento

Si tu aplicación gestiona picos de tráfico, como una plataforma logística durante el despacho matutino, haz pruebas de carga de la nueva API al 2x de tu volumen máximo. MapAtlas ofrece un entorno sandbox para pruebas de carga sin incurrir en facturación de producción.

Cronograma: qué hacer esta semana

Si aún no has empezado a migrar, este es el orden de prioridad:

1. Esta semana: Audita tu codebase. Identifica cada uso de los cuatro servicios deprecados.
2. Semana 2: Crea una cuenta en MapAtlas y obtén API keys. El tier gratuito cubre 10.000 peticiones para testing.
3. Semana 3: Implementa el reemplazo para tu servicio más crítico (normalmente DirectionsService).
4. Semana 4: Migra los servicios restantes y ejecuta testing en paralelo.
5. Antes del deadline de mayo: Haz el cambio definitivo, elimina las dependencias de Google API, actualiza la facturación.

La migración no es opcional. Después de mayo de 2026, las clases deprecadas serán eliminadas de la Maps JavaScript API, y cualquier código que las referencie lanzará errores en tiempo de ejecución. Empieza ahora y tendrás tiempo para testear bien. Espera hasta la última semana y estarás parcheando producción bajo presión.

Para soporte de migración, MapAtlas ofrece asistencia directa a desarrolladores. Contáctanos a través de la página de contacto o empieza con la documentación de la API para evaluar las APIs de reemplazo según tus requisitos.