|
| 1 | +/* |
| 2 | + * @license |
| 3 | + * Copyright 2025 Google LLC. All Rights Reserved. |
| 4 | + * SPDX-License-Identifier: Apache-2.0 |
| 5 | + */ |
| 6 | +// [START maps_routes_get_alternatives] |
| 7 | +// Initialize and add the map. |
| 8 | +let mapPolylines: google.maps.Polyline[] = []; |
| 9 | +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; |
| 10 | +let innerMap; |
| 11 | + |
| 12 | +// Initialize and add the map. |
| 13 | +async function initMap() { |
| 14 | + // Request the needed libraries. |
| 15 | + await google.maps.importLibrary('maps') as google.maps.MapsLibrary; |
| 16 | + |
| 17 | + innerMap = mapElement.innerMap; |
| 18 | + innerMap.setOptions({ |
| 19 | + mapTypeControl: false, |
| 20 | + mapId: 'DEMO_MAP_ID', |
| 21 | + }); |
| 22 | + |
| 23 | + // Call the function after the map is loaded. |
| 24 | + google.maps.event.addListenerOnce(innerMap, 'idle', () => { |
| 25 | + getDirections(); |
| 26 | + }); |
| 27 | + |
| 28 | +} |
| 29 | + |
| 30 | +async function getDirections() { |
| 31 | + //@ts-ignore |
| 32 | + // Request the needed libraries. |
| 33 | + const [{ Route, RouteLabel }] = await Promise.all([ |
| 34 | + google.maps.importLibrary('routes') |
| 35 | + ]); |
| 36 | + // [START maps_routes_get_alternatives_request_full] |
| 37 | + // [START maps_routes_get_alternatives_request] |
| 38 | + // Build a request. |
| 39 | + const request = { |
| 40 | + origin: 'San Francisco, CA', |
| 41 | + destination: 'Sunset Dr Pacific Grove, CA 93950', |
| 42 | + travelMode: 'DRIVING', |
| 43 | + computeAlternativeRoutes: true, |
| 44 | + fields: ['path', 'routeLabels', 'viewport'], // Request the routeLabels field. |
| 45 | + }; |
| 46 | + // [END maps_routes_get_alternatives_request] |
| 47 | + |
| 48 | + // [START maps_routes_get_alternatives_compute] |
| 49 | + // Call computeRoutes to get the directions. |
| 50 | + const result = await Route.computeRoutes(request); |
| 51 | + if (!result.routes || result.routes.length === 0) { |
| 52 | + console.warn("No routes found"); |
| 53 | + return; |
| 54 | + } |
| 55 | + |
| 56 | + let primaryRoute; |
| 57 | + |
| 58 | + for (const route of result.routes) { |
| 59 | + // Save the primary route for last so it's drawn on top. |
| 60 | + if ( |
| 61 | + // Check for the default route. |
| 62 | + route.routeLabels?.includes(RouteLabel.DEFAULT_ROUTE) |
| 63 | + ) { |
| 64 | + primaryRoute = route; |
| 65 | + } else { |
| 66 | + drawRoute(route, false); |
| 67 | + } |
| 68 | + } |
| 69 | + |
| 70 | + if (primaryRoute) { |
| 71 | + drawRoute(primaryRoute, true); |
| 72 | + await primaryRoute.createWaypointAdvancedMarkers({ map: innerMap }); |
| 73 | + innerMap.fitBounds(primaryRoute.viewport, 100); |
| 74 | + } |
| 75 | + // [END maps_routes_get_alternatives_compute] |
| 76 | + // [END maps_routes_get_alternatives_request_full] |
| 77 | + |
| 78 | + // Display the raw JSON for the result in the console. |
| 79 | + console.log(`Response:\n ${JSON.stringify(result, null, 2)}`); |
| 80 | +} |
| 81 | + |
| 82 | +function drawRoute(route, isPrimaryRoute) { |
| 83 | + mapPolylines = mapPolylines.concat( |
| 84 | + route.createPolylines({ |
| 85 | + polylineOptions: isPrimaryRoute |
| 86 | + ? { map: innerMap } |
| 87 | + : { |
| 88 | + map: innerMap, |
| 89 | + strokeColor: "#669DF6", |
| 90 | + strokeOpacity: 0.5, |
| 91 | + strokeWidth: 8, |
| 92 | + }, |
| 93 | + colorScheme: innerMap.get("colorScheme"), |
| 94 | + }), |
| 95 | + ); |
| 96 | +} |
| 97 | + |
| 98 | +initMap(); |
| 99 | +// [END maps_routes_get_alternatives] |
0 commit comments