Cómo obtener rutas alternativas

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.

La ruta predeterminada que muestra la API de Routes suele ser la ruta más rápida desde el origen hasta el destino. Cuando solicitas rutas alternativas, la API muestra un array de hasta tres rutas junto con la ruta predeterminada. Luego, tus clientes pueden elegir la ruta que más les convenga.

Consulta el ejemplo de código fuente completo

En el siguiente ejemplo de código, se muestra cómo solicitar rutas alternativas y, luego, dibujar las rutas en un mapa.

TypeScript

const mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route, RouteLabel }] = await Promise.all([
        google.maps.importLibrary('routes'),
    ]);

    // Build a request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'San Francisco, CA',
        destination: 'Sunset Dr Pacific Grove, CA 93950',
        travelMode: 'DRIVING',
        computeAlternativeRoutes: true,
        fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    let primaryRoute: google.maps.routes.Route | undefined;

    for (const route of result.routes) {
        // Save the primary route for last so it's drawn on top.
        if (
            // Check for the default route.
            route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
        ) {
            primaryRoute = route;
        } else {
            drawRoute(route, false);
        }
    }

    if (primaryRoute) {
        drawRoute(primaryRoute, true);
        await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
        innerMap.fitBounds(primaryRoute.viewport!, 50);
        innerMap.setHeading(70);
    }

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(result, null, 2)}`);
}

function drawRoute(route: google.maps.routes.Route, isPrimaryRoute: boolean) {
    mapPolylines.push(
        ...route.createPolylines({
            polylineOptions: isPrimaryRoute
                ? {
                      map: innerMap,
                      strokeWeight: 5,
                  }
                : {
                      map: innerMap,
                      strokeColor: '#669DF6',
                      strokeOpacity: 0.5,
                      strokeWeight: 5,
                  },
            colorScheme: innerMap!.get(
                'colorScheme'
            ) as google.maps.ColorScheme,
        })
    );
}

void init();
index.ts

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

JavaScript

const mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Call the function after the map is loaded.
    event.addListenerOnce(innerMap, 'idle', () => {
        void getDirections();
    });
}

async function getDirections() {
    // Request the needed libraries.
    const [{ Route, RouteLabel }] = await Promise.all([
        google.maps.importLibrary('routes'),
    ]);

    // Build a request.
    const request = {
        origin: 'San Francisco, CA',
        destination: 'Sunset Dr Pacific Grove, CA 93950',
        travelMode: 'DRIVING',
        computeAlternativeRoutes: true,
        fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
    };

    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn('No routes found');
        return;
    }

    let primaryRoute;

    for (const route of result.routes) {
        // Save the primary route for last so it's drawn on top.
        if (
            // Check for the default route.
            route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
        ) {
            primaryRoute = route;
        } else {
            drawRoute(route, false);
        }
    }

    if (primaryRoute) {
        drawRoute(primaryRoute, true);
        await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
        innerMap.fitBounds(primaryRoute.viewport, 50);
        innerMap.setHeading(70);
    }

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(result, null, 2)}`);
}

function drawRoute(route, isPrimaryRoute) {
    mapPolylines.push(
        ...route.createPolylines({
            polylineOptions: isPrimaryRoute
                ? {
                      map: innerMap,
                      strokeWeight: 5,
                  }
                : {
                      map: innerMap,
                      strokeColor: '#669DF6',
                      strokeOpacity: 0.5,
                      strokeWeight: 5,
                  },
            colorScheme: innerMap.get('colorScheme'),
        })
    );
}

void init();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</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>
        <gmp-map center="37.447646, -122.113878" zoom="10"></gmp-map>
    </body>
</html>
index.html

Consideraciones para solicitar rutas alternativas

Cuando solicites rutas alternativas, ten en cuenta lo siguiente:

• Solo puedes solicitar rutas alternativas para rutas sin puntos de referencia intermedios. Si solicitas rutas alternativas cuando la ruta especifica puntos de referencia intermedios, no se produce un error. Sin embargo, no se muestran rutas alternativas.
• La respuesta contiene un máximo de tres rutas alternativas. Sin embargo, a veces no rutas alternativas están disponibles, por lo que la respuesta solo contiene la ruta predeterminada.
• Debido al procesamiento adicional que se requiere para calcular rutas alternativas, solicitar rutas alternativas puede aumentar el tiempo de respuesta de la API.

Solicita rutas alternativas

Para solicitar rutas alternativas, configura computeAlternativeRoutes como true en la solicitud computeRoutes.

// Build a request.
const request = {
    origin: 'San Francisco, CA',
    destination: 'Sunset Dr Pacific Grove, CA 93950',
    travelMode: 'DRIVING',
    computeAlternativeRoutes: true,
    fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field.
};
index.js

Para obtener las rutas, itera a través del array de rutas (por ejemplo, result.routes). La ruta predeterminada tiene la etiqueta de ruta RouteLabel.DEFAULT_ROUTE. En el siguiente ejemplo de código, se muestra cómo iterar a través de las rutas y dibujar la ruta principal en último lugar.

// Call computeRoutes to get the directions.
const result = await Route.computeRoutes(request);
if (!result.routes || result.routes.length === 0) {
    console.warn('No routes found');
    return;
}

let primaryRoute;

for (const route of result.routes) {
    // Save the primary route for last so it's drawn on top.
    if (
        // Check for the default route.
        route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE)
    ) {
        primaryRoute = route;
    } else {
        drawRoute(route, false);
    }
}

if (primaryRoute) {
    drawRoute(primaryRoute, true);
    await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap });
    innerMap.fitBounds(primaryRoute.viewport, 50);
    innerMap.setHeading(70);
}
index.js