Obtén una matriz de ruta

Desarrolladores del Espacio Económico Europeo (EEE)

Si tu dirección de facturación se encuentra en el Espacio Económico Europeo, a partir del 8 de julio de 2025, se aplicarán las Condiciones del Servicio de Google Maps Platform para el EEE al uso que hagas de los Servicios. La funcionalidad varía según la región. Obtén más información.

Una matriz de rutas es un array bidimensional de información de rutas, en el que las filas corresponden a los orígenes y las columnas a los destinos. Dada una lista de orígenes y destinos, la clase Route Matrix calcula la distancia y la duración de una ruta que comienza en cada origen y termina en cada destino. Usa la clase Route Matrix para calcular la distancia y la duración de una ruta para varios orígenes y destinos.

Consulta el ejemplo de código fuente completo

En este ejemplo, se muestra cómo usar la clase Route Matrix para calcular las distancias y las duraciones de los viajes entre varios orígenes y destinos.

TypeScript

// Initialize and add the map.
let map;
let markers: google.maps.marker.AdvancedMarkerElement[] = [];
let center = { lat: 51.55, lng: -1.8 };

async function initMap(): Promise<void> {
  //  Request the needed libraries.
  //@ts-ignore
  const [{Map}, {Place}, {AdvancedMarkerElement, PinElement}, {RouteMatrix}] = await Promise.all([
    google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,
    google.maps.importLibrary('marker') as Promise<google.maps.MarkerLibrary>,
    google.maps.importLibrary('routes') as Promise<google.maps.RoutesLibrary>
  ]);

  const bounds = new google.maps.LatLngBounds();

  map = new Map(document.getElementById('map') as HTMLElement, {
    zoom: 8,
    center: center,
    mapId: 'DEMO_MAP_ID',
  });

  // Build the request using Place instances.
  const origin1 = new Place({
    id: "ChIJ83WZp86p2EcRbMrkYqGncBQ", // Greenwich, London, UK
  });
  const origin2 = new Place({
    id: "ChIJCSkVvleJc0gR8HHaTGpajKc", // Southampton, UK
  });
  const destinationA = new Place({
    id: "ChIJYdizgWaDcUgRH9eaSy6y5I4", // Bristol, UK
  });
  const destinationB = new Place({
    id: "ChIJ9VPsNNQCbkgRDmeGZdsGNBQ", // Cardiff, UK
  });

  await Promise.all([
    origin1.fetchFields({ fields: ['location', 'displayName']}),
    origin2.fetchFields({ fields: ['location', 'displayName']}),
    destinationA.fetchFields({ fields: ['location', 'displayName']}),
    destinationB.fetchFields({ fields: ['location', 'displayName']}),
  ]);

  const request = {
    origins: [origin1, origin2], 
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    units: google.maps.UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
  };

  // Show the request.
  (document.getElementById("request") as HTMLDivElement).innerText =
    JSON.stringify(request, null, 2);

  // Get the RouteMatrix response.
  const response = await RouteMatrix.computeRouteMatrix(request); 

  // Show the response.
  (document.getElementById("response") as HTMLDivElement).innerText =
    JSON.stringify(response, null, 2);

  // Add markers for the origins.
  for (const origin of request.origins) {
    if (origin.location) {
      const pin = new PinElement({
        //@ts-ignore
        glyphText: "O",
        glyphColor: "white",
        background: "#137333",
        borderColor: "white",
      });
      const marker = new AdvancedMarkerElement({
        map,
        position: origin.location,
        content: pin.element,
        title: `Origin: ${origin.displayName}`,
      });
      markers.push(marker);
      bounds.extend(origin.location);
    }
  }

  // Add markers for the destinations.
  for (let i = 0; i < request.destinations.length; i++) {
    const destination = request.destinations[i];
    if (destination.location) {
      const pin = new PinElement({
        //@ts-ignore
        glyphText: "D",
        glyphColor: "white",
        background: "#C5221F",
        borderColor: "white",
      });

      const marker = new AdvancedMarkerElement({
        map,
        position: destination.location,
        content: pin.element,
        title: `Destination: ${destination.displayName}`,
      });

      markers.push(marker);
      bounds.extend(destination.location);
    }
  }

  // Fit the map to the bounds of all markers.
  map.fitBounds(bounds);
}

initMap();
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// Initialize and add the map.
let map;
let markers = [];
let center = { lat: 51.55, lng: -1.8 };
async function initMap() {
    //  Request the needed libraries.
    //@ts-ignore
    const [{ Map }, { Place }, { AdvancedMarkerElement, PinElement }, { RouteMatrix }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes')
    ]);
    const bounds = new google.maps.LatLngBounds();
    map = new Map(document.getElementById('map'), {
        zoom: 8,
        center: center,
        mapId: 'DEMO_MAP_ID',
    });
    // Build the request using Place instances.
    const origin1 = new Place({
        id: "ChIJ83WZp86p2EcRbMrkYqGncBQ", // Greenwich, London, UK
    });
    const origin2 = new Place({
        id: "ChIJCSkVvleJc0gR8HHaTGpajKc", // Southampton, UK
    });
    const destinationA = new Place({
        id: "ChIJYdizgWaDcUgRH9eaSy6y5I4", // Bristol, UK
    });
    const destinationB = new Place({
        id: "ChIJ9VPsNNQCbkgRDmeGZdsGNBQ", // Cardiff, UK
    });
    await Promise.all([
        origin1.fetchFields({ fields: ['location', 'displayName'] }),
        origin2.fetchFields({ fields: ['location', 'displayName'] }),
        destinationA.fetchFields({ fields: ['location', 'displayName'] }),
        destinationB.fetchFields({ fields: ['location', 'displayName'] }),
    ]);
    const request = {
        origins: [origin1, origin2],
        destinations: [destinationA, destinationB],
        travelMode: 'DRIVING',
        units: google.maps.UnitSystem.METRIC,
        fields: ['distanceMeters', 'durationMillis', 'condition'],
    };
    // Show the request.
    document.getElementById("request").innerText =
        JSON.stringify(request, null, 2);
    // Get the RouteMatrix response.
    const response = await RouteMatrix.computeRouteMatrix(request);
    // Show the response.
    document.getElementById("response").innerText =
        JSON.stringify(response, null, 2);
    // Add markers for the origins.
    for (const origin of request.origins) {
        if (origin.location) {
            const pin = new PinElement({
                //@ts-ignore
                glyphText: "O",
                glyphColor: "white",
                background: "#137333",
                borderColor: "white",
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                content: pin.element,
                title: `Origin: ${origin.displayName}`,
            });
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }
    // Add markers for the destinations.
    for (let i = 0; i < request.destinations.length; i++) {
        const destination = request.destinations[i];
        if (destination.location) {
            const pin = new PinElement({
                //@ts-ignore
                glyphText: "D",
                glyphColor: "white",
                background: "#C5221F",
                borderColor: "white",
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: destination.location,
                content: pin.element,
                title: `Destination: ${destination.displayName}`,
            });
            markers.push(marker);
            bounds.extend(destination.location);
        }
    }
    // Fit the map to the bounds of all markers.
    map.fitBounds(bounds);
}
initMap();
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}

#sidebar {
  flex-direction: column;
}
style.css

HTML

<html>
  <head>
    <title>Route matrix</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div id="sidebar">
        <h3 style="flex-grow: 0">Request</h3>
        <pre style="flex-grow: 1" id="request"></pre>
        <h3 style="flex-grow: 0">Response</h3>
        <pre style="flex-grow: 1" id="response"></pre>
      </div>
    </div>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Prueba la muestra

JSFiddle.net

Límites de solicitudes

El método computeRouteMatrix aplica los siguientes límites de solicitudes para los puntos de referencia que usan instancias de direcciones o lugares, y para los elementos. Los elementos son las rutas entre cada origen y destino en una matriz de rutas, por lo que la cantidad de elementos es la cantidad de orígenes multiplicada por la cantidad de destinos. Por ejemplo, si tienes 10 orígenes y 10 destinos, tendrás 100 elementos:

• La cantidad de elementos no puede superar los 625 para las rutas que no son de TRANSIT.
• Si especificas una ruta de TRANSIT, la cantidad de elementos no puede superar los 100.
• Si especificas TRAFFIC_AWARE_OPTIMAL, la cantidad de elementos no puede superar los 100.
• Si especificas orígenes o destinos con direcciones o instancias de Place, puedes especificar hasta 50 en total de esta manera.

Para obtener más detalles, consulta Cómo obtener una ruta de transporte público.

Ejemplo de solicitud de matriz de rutas

En el siguiente ejemplo, se muestra un ComputeRouteMatrixRequest. En este ejemplo, se realizan las siguientes acciones:

• Se muestra cómo especificar un array de dos puntos de referencia de origen y dos de destino. El método calcula una ruta desde cada origen hasta cada destino, por lo que la respuesta contiene cuatro rutas.
  En el array, el primer elemento está en el índice 0, el segundo en el índice 1, y así sucesivamente.
• Especifica los campos que se devolverán. En este ejemplo, la solicitud está configurada para devolver durationMillis, distanceMeters y condition para cada ruta.

TypeScript

const request = {
  origins: [origin1, origin2], 
  destinations: [destinationA, destinationB],
  travelMode: 'DRIVING',
  units: google.maps.UnitSystem.METRIC,
  fields: ['distanceMeters', 'durationMillis', 'condition'],
};
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

const request = {
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    units: google.maps.UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
};
index.js

La respuesta contiene las cuatro rutas posibles para la combinación de todos los puntos de partida y de destino, como se muestra en el siguiente ejemplo:

"matrix": {
  "rows": [
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 202587,
          "durationMillis": 10040000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 252734,
          "durationMillis": 12240000
        }
      ]
    },
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 166135,
          "durationMillis": 6596000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 216282,
          "durationMillis": 8797000
        }
      ]
    }
  ]
}
    

Identifica cada ruta en el resultado usando el índice de origen y destino para encontrar el RouteMatrixItem correspondiente en el array bidimensional. Por ejemplo, el objeto RouteMatrixItem que describe la ruta calculada desde el origen en el índice 1 y el destino 0 en la solicitud estaría en el 2º elemento del array RouteMatrix.rows y el 1º elemento del array RouteMatrixRow.items.

En el siguiente fragmento de código, se muestra cómo identificar el RouteMatrixItem para encontrar la ruta de un origen y un destino específicos:

// Find the route for origin 'x' and destination 'y'.
const {matrix} = await RouteMatrix.computeRouteMatrix(request);
const myRouteMatrixItem = matrix.rows[x].items[y];
    

Elige los campos que se devolverán

Cuando solicitas una matriz de rutas, debes usar una máscara de campo para especificar qué información debe devolver la respuesta.

Usar una máscara de campo también garantiza que no solicites datos innecesarios, lo que, a su vez, ayuda a reducir la latencia de respuesta y evita que se devuelva información que tu sistema no necesita.

Especifica la lista de campos que necesitas configurando la propiedad ComputeRoutesMatrixRequest.fields, como se muestra en el siguiente fragmento:

fields: ['durationMillis', 'distanceMeters', 'condition'],
    

Determina qué máscaras de campo usar

A continuación, se explica cómo determinar qué campos deseas usar y cómo construir las máscaras de campo para ellos:

1. Solicita todos los campos con una máscara de campo de ['*'].
   Precaución: Si bien puedes usar esta máscara de campo con comodín durante el desarrollo para determinar qué campos necesitas, no la uses en producción. Solicitar todos los campos en producción genera costos más altos y tiempos de respuesta más largos. Es posible que tu costo también aumente de forma inesperada a medida que se agreguen funciones más avanzadas, ya que esta máscara de campo las incluirá automáticamente. En cambio, solicita solo los campos que necesitas para minimizar los costos y el tiempo de respuesta de la solicitud.
2. Consulta la jerarquía de los campos en la clase RouteMatrixItem para los campos que desees.

3. Construye tus máscaras de campo con la jerarquía de los campos que se muestran en el paso anterior, con este formato:

   topLevelField[.secondLevelField][.thirdLevelField][...]

Por ejemplo, para este RouteMatrixItem:

  "travelAdvisory": {
    "fuelConsumptionMicroliters": 0,
    "tollInfo": {
      "estimatedPrices": [
        {
          "currencyCode": "USD",
          "units": 4,
          "nanos": 400000000
        }
      ]
    }
  },
    

Si solo deseas devolver el campo tollInfo para el RouteMatrixItem, tu máscara de campo será la siguiente:

fields: ['travelAdvisory.tollInfo']

Si, en cambio, deseas solicitar el consumo de combustible estimado, tu máscara de campo será la siguiente:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

Si quieres solicitar ambos, tu máscara de campo será la siguiente:

fields: ['travelAdvisory.fuelConsumptionMicroliters', 'travelAdvisory.tollInfo']

Y si deseas solicitar el conjunto completo de avisos de viaje, tu máscara de campo se verá de la siguiente manera:

fields: ['travelAdvisory']

La jerarquía de propiedades solo está disponible para RouteMatrix.computeRouteMatrix y no es compatible con Route.computeRoutes.

Cómo solicitar una matriz de rutas de transporte público

Obtén una matriz de rutas de transporte público que use las opciones de transporte público disponibles en la región. Las opciones de transporte público pueden incluir autobuses, subterráneos y trenes, entre otros. Para solicitar una matriz de rutas de transporte público, haz lo siguiente:

• Configura el elemento travelMode en TRANSIT
• Solicita el campo travelAdvisory.

Obtén más información sobre las rutas de transporte público.