Stay organized with collections
Save and categorize content based on your preferences.
The Route Preview template presents up to 3 available routes for a selected
destination, next to a map.
Route information must include either duration or distance and may also include
estimated travel time. As a user selects a route to preview, the app updates the
map with a visual representation of the route.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eThe Route Preview template, now deprecated in favor of the Map + Content template, displays up to 3 routes alongside a map for navigation apps.\u003c/p\u003e\n"],["\u003cp\u003eRoute information must include duration or distance and may include estimated travel time, with the selected route highlighted on the map.\u003c/p\u003e\n"],["\u003cp\u003eThis template requires at least one route to be presented by default and allows for optional components like the header, action strip, and map action strip.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers must present at least one route, have one selected by default, show duration or distance for routes, and should highlight the relevant route on the map upon user selection, while avoiding presenting more than 3 routes.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nThe Route Preview template presents up to 3 available routes for a selected\ndestination, next to a map.\n| **Note:** This template is deprecated in favor of the [Map + Content template](/cars/design/create-apps/apps-for-drivers/templates/map-content-template). Designers and developers should work to update their task flows to make use of the new template.\n\nRoute information must include either duration or distance and may also include\nestimated travel time. As a user selects a route to preview, the app updates the\nmap with a visual representation of the route.\n**Note:** This template is for navigation apps only. \n**Includes:**\n\n- [Header](/cars/design/create-apps/apps-for-drivers/components/header) (in card)\n- [Action strip](/cars/design/create-apps/apps-for-drivers/components/action-strip) (optional)\n- [List rows](/cars/design/create-apps/apps-for-drivers/components/row) with route information\n- Base map (full-screen, drawn by the app)\n- Optional [map action strip](/cars/design/create-apps/apps-for-drivers/components/map-action-strip) with up to 4 buttons for map interactivity\n\n\u003cbr /\u003e\n\nRoute Preview template examples \nTwo routes, linked to map with numbered markers\n(Android Auto example)\n\nThree routes, with estimated trip duration shown on\nmap (AAOS example)\n\n\u003cbr /\u003e\n\nRoute Preview template UX requirements\n\nApp developers:\n\n|--------------|------------------------------------------------------------------------|\n| **MUST** | Present at least 1 route on this template. |\n| **MUST** | Have 1 route selected by default. |\n| **MUST** | Show either duration or distance for routes. |\n| **MUST NOT** | Present more than 3 routes. |\n| **SHOULD** | Highlight the relevant route on the map when a user makes a selection. |"]]
