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 ();
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 ();
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 ; }
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>
Try Sample
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. };
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 ); }
