Get alternative routes

European Economic Area (EEA) developers

If your billing address is in the European Economic Area, effective on 8 July 2025, the Google Maps Platform EEA Terms of Service will apply to your use of the Services. Functionality varies by region. Learn more.

The default route returned by the Routes API is typically the fastest route from the origin to the destination. When you request alternative routes, the API returns an array of up to three routes along with the default route. Your customers can then choose a route that is best for them.

See the complete example source code

The following code sample shows how to request alternative routes and then draw the routes on a map.

TypeScript

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

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

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

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

}

async function getDirections() {
  //@ts-ignore
  // 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 = mapPolylines.concat(
    route.createPolylines({
      polylineOptions: isPrimaryRoute
        ? {
            map: innerMap,
            strokeWeight: 5,
          }
        : {
            map: innerMap,
            strokeColor: "#669DF6",
            strokeOpacity: 0.5,
            strokeWeight: 5,
          },
      colorScheme: innerMap.get("colorScheme"),
    }),
  );
}

initMap();
index.ts

Note: Read the guide on using TypeScript and Google Maps.

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // 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 = mapPolylines.concat(route.createPolylines({
        polylineOptions: isPrimaryRoute
            ? {
                map: innerMap,
                strokeWeight: 5,
            }
            : {
                map: innerMap,
                strokeColor: "#669DF6",
                strokeOpacity: 0.5,
                strokeWeight: 5,
            },
        colorScheme: innerMap.get("colorScheme"),
    }));
}
initMap();
index.js

Note: The JavaScript is compiled from the TypeScript snippet.

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>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="10"></gmp-map>
    <!-- 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

Try Sample

JSFiddle.net

Considerations when requesting alternative routes

When requesting alternative routes, consider the following:

• You can only request alternative routes for routes without intermediate waypoints. Requesting alternative routes when the route specifies intermediate waypoints does not cause an error. However, no alternative routes are returned.
• The response contains a maximum of three alternative routes. However, sometimes no alternative routes are available so the response only contains the default route.
• Because of the additional processing required to calculate alternative routes, requesting alternative routes might increase the response time of the API.

Request alternative routes

To request alternative routes, set computeAlternativeRoutes to true in the computeRoutes request.

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

To get the routes, iterate through the routes array (for example, result.routes). The default route has the route label RouteLabel.DEFAULT_ROUTE. The following code sample shows iterating through the routes, and drawing the primary route last.

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