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 duraciones de los viajes entre varios orígenes y destinos.

TypeScript

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

async function init(): Promise<void> {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map')!, {
        zoom: 8,
        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 destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request: google.maps.routes.ComputeRouteMatrixRequest = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: 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 origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

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

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

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

void init();
index.ts

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

JavaScript

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

async function init() {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map'), {
        zoom: 8,
        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 destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: 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 origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

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

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

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

void init();
index.js

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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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>
    </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, tienes 100 elementos:

• La cantidad de elementos no puede superar los 625 para las rutas que no son 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 Obtén 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 acciones siguientes:

• 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 deben devolver. En este ejemplo, la solicitud se configura para devolver durationMillis, distanceMeters y condition para cada ruta.

TypeScript

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

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

JavaScript

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

La respuesta contiene las cuatro rutas posibles para la combinación de todos los puntos de referencia de origen y 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 con el índice de origen y destino para encontrar el RouteMatrixItem correspondiente en el array en 2D. 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 segundo elemento del array RouteMatrix.rows y en el primer 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.

El uso de una máscara de campo también garantiza que no solicites datos innecesarios, lo que, a su vez, ayuda con 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 muestra cómo puedes determinar qué campos deseas usar y 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 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. Tu costo también puede aumentar de forma inesperada a medida que se agregan funciones más avanzadas, ya que esta máscara de campo las incluirá automáticamente. En su lugar, solicita solo los campos que necesitas para minimizar los costos y el tiempo de respuesta de la solicitud.
2. Observa la jerarquía de los campos en la clase RouteMatrixItem para los campos que deseas.

3. Crea 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 deseas mostrar solo el campo tollInfo para RouteMatrixItem, tu máscara de campo es la siguiente:

fields: ['travelAdvisory.tollInfo']

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

fields: ['travelAdvisory.fuelConsumptionMicroliters']

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

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

Y si quieres solicitar el conjunto completo de recomendaciones para viajes, tu máscara de campo es la siguiente:

fields: ['travelAdvisory']

La jerarquía de propiedades solo está disponible para RouteMatrix.computeRouteMatrix y no se admite para Route.computeRoutes.

Solicita 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, metros 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.