googlemaps-samples · willum070 · Sep 4, 2025 · Sep 4, 2025
diff --git a/dist/index.html b/dist/index.html
@@ -63,6 +63,9 @@ <h1>Maps JSAPI Samples</h1>
   <li><a href='/samples/react-ui-kit-place-details-latlng-compact/dist'>react-ui-kit-place-details-latlng-compact</a></li>
   <li><a href='/samples/react-ui-kit-search-nearby/dist'>react-ui-kit-search-nearby</a></li>
   <li><a href='/samples/react-ui-kit-search-text/dist'>react-ui-kit-search-text</a></li>
+  <li><a href='/samples/routes-get-directions/dist'>routes-get-directions</a></li>
+  <li><a href='/samples/routes-get-directions-panel/dist'>routes-get-directions-panel</a></li>
+  <li><a href='/samples/routes-route-matrix/dist'>routes-route-matrix</a></li>
   <li><a href='/samples/test-example/dist'>test-example</a></li>
   <li><a href='/samples/ui-kit-customization/dist'>ui-kit-customization</a></li>
   <li><a href='/samples/ui-kit-place-details/dist'>ui-kit-place-details</a></li>

diff --git a/dist/samples/routes-get-directions-panel/app/.eslintsrc.json b/dist/samples/routes-get-directions-panel/app/.eslintsrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
diff --git a/dist/samples/routes-get-directions-panel/app/README.md b/dist/samples/routes-get-directions-panel/app/README.md
@@ -0,0 +1,33 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=sample-name/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
+
diff --git a/dist/samples/routes-get-directions-panel/app/index.html b/dist/samples/routes-get-directions-panel/app/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_routes_get_directions_panel]-->
+<html>
+
+<head>
+  <title>Get directions with step by step panel</title>
+
+  <link rel="stylesheet" type="text/css" href="./style.css" />
+  <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+  <div class="container">
+    <div class="map-container">
+      <div id="map"></div>
+    </div>
+    <div class="directions-container">
+      <div id="directions">
+        <p>Directions</p>
+      </div>
+    </div>
+  </div>
+  <!-- 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>
+<!--[END maps_routes_get_directions_panel]-->
diff --git a/dist/samples/routes-get-directions-panel/app/index.ts b/dist/samples/routes-get-directions-panel/app/index.ts
@@ -0,0 +1,143 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// [START maps_routes_get_directions_panel]
+// Initialize and add the map.
+let map;
+let mapPolylines: google.maps.Polyline[] = [];
+let markers: google.maps.marker.AdvancedMarkerElement[] = [];
+let center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA
+
+// Initialize and add the map.
+async function initMap(): Promise<void> {
+  // Request the needed libraries.
+  //@ts-ignore
+  const [{Map}, {Route}] = await Promise.all([
+    google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
+    google.maps.importLibrary('routes') as Promise<google.maps.RoutesLibrary>
+  ]);
+
+  map = new Map(document.getElementById("map") as HTMLElement, {
+    zoom: 12,
+    center,
+    mapTypeControl: false,
+    mapId: 'DEMO_MAP_ID',
+  });
+
+  // Define a simple directions request.
+  const request = {
+    origin: 'Mountain View, CA',
+    destination: 'Sausalito, CA',
+    intermediates: ['Half Moon Bay, CA', 'Pacifica Esplanade Beach'],
+    travelMode: 'DRIVING',
+    fields: ['legs', 'path'],
+  };
+
+  // Call computeRoutes to get the directions.
+  const { routes } = await Route.computeRoutes(request);
+
+  // Display the raw JSON for the result in the console.
+  console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);
+
+  // Use createPolylines to create polylines for the route.
+  mapPolylines = routes[0].createPolylines();
+  // Add polylines to the map.
+  mapPolylines.forEach((polyline) => polyline.setMap(map));
+
+  fitMapToPath(routes[0].path!);
+
+  // Add markers to all the points.
+  const markers = await routes[0].createWaypointAdvancedMarkers({ map });
+
+  // [START maps_routes_get_directions_panel_steps]
+  // Render navigation instructions
+  const directionsPanel = document.getElementById("directions");
+
+  if (!routes || routes.length === 0) {
+    if (directionsPanel) {
+      directionsPanel.textContent = "No routes available.";
+    }
+    return;
+  }
+
+  const route = routes[0];
+  if (!route.legs || route.legs.length === 0) {
+    if (directionsPanel) {
+      directionsPanel.textContent = "The route has no legs.";
+    }
+    return;
+  }
+
+  const fragment = document.createDocumentFragment();
+
+  route.legs.forEach((leg, index) => {
+    const legContainer = document.createElement("div");
+    legContainer.className = "directions-leg";
+
+    // Leg Title
+    const legTitleElement = document.createElement("h3");
+    legTitleElement.textContent = `Leg ${index + 1} of ${route.legs.length}`;
+    legContainer.appendChild(legTitleElement);
+
+    if (leg.steps && leg.steps.length > 0) {
+      // Add steps to an ordered list
+      const stepsList = document.createElement("ol");
+      stepsList.className = "directions-steps";
+
+      leg.steps.forEach((step, stepIndex) => {
+        const stepItem = document.createElement("li");
+        stepItem.className = "direction-step";
+
+        const directionWrapper = document.createElement("div");
+        directionWrapper.className = "direction";
+
+        // Maneuver
+        if (step.maneuver) {
+          const maneuverNode = document.createElement("p");
+          maneuverNode.textContent = step.maneuver;
+          maneuverNode.className = "maneuver";
+          directionWrapper.appendChild(maneuverNode);
+        }
+
+        // Distance and Duration
+        if (step.localizedValues) {
+          const distanceNode = document.createElement("p");
+          distanceNode.textContent = `${step.localizedValues.distance} (${step.localizedValues.staticDuration})`;
+          distanceNode.className = "distance";
+          directionWrapper.appendChild(distanceNode);
+        }
+
+        // Instructions
+        if (step.instructions) {
+          const instructionsNode = document.createElement("p");
+          instructionsNode.textContent = step.instructions;
+          instructionsNode.className = "instruction";
+          directionWrapper.appendChild(instructionsNode);
+        }
+
+        stepItem.appendChild(directionWrapper);
+        stepsList.appendChild(stepItem);
+      });
+      legContainer.appendChild(stepsList);
+    }
+
+    fragment.appendChild(legContainer);
+    directionsPanel?.appendChild(fragment);
+  });
+
+}
+// [END maps_routes_get_directions_panel_steps]
+// Helper function to fit the map to the path.
+async function fitMapToPath(path) {
+  const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
+  const bounds = new LatLngBounds();
+  path.forEach((point) => {
+    bounds.extend(point);
+  });
+  map.fitBounds(bounds);
+}
+
+initMap();
+// [END maps_routes_get_directions_panel]
diff --git a/dist/samples/routes-get-directions-panel/app/package.json b/dist/samples/routes-get-directions-panel/app/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/routes-get-directions-panel",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh routes-get-directions-panel && bash ../app.sh routes-get-directions-panel && bash ../docs.sh routes-get-directions-panel && npm run build:vite --workspace=. && bash ../dist.sh routes-get-directions-panel",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/dist/samples/routes-get-directions-panel/app/style.css b/dist/samples/routes-get-directions-panel/app/style.css
@@ -0,0 +1,64 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_routes_get_directions_panel] */
+ /*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+.container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+ }
+
+.directions-panel-container, .map-container {
+  height: 100%;
+  width: 50%;
+  font-family: monospace;
+}
+
+.directions-panel-container {
+  overflow-y: auto;
+}
+
+/* 
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+#map {
+  height: 100%;
+}
+
+.direction {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}
+
+.maneuver {
+  width: 25%
+}
+
+.distance {
+  width: 25%
+}
+
+.instruction {
+  width: 50%;
+}
+
+/* 
+ * Optional: Makes the sample page fill the window. 
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+  /* [END maps_routes_get_directions_panel] */
+
diff --git a/dist/samples/routes-get-directions-panel/app/tsconfig.json b/dist/samples/routes-get-directions-panel/app/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "module": "esnext",
+      "target": "esnext",
+      "strict": true,
+      "noImplicitAny": false,
+      "lib": [
+        "es2015",
+        "esnext",
+        "es6",
+        "dom",
+        "dom.iterable"
+      ],
+      "moduleResolution": "Node",
+      "jsx": "preserve"
+    }
+  }
diff --git a/dist/samples/routes-get-directions-panel/dist/assets/index-CIijyEYV.js b/dist/samples/routes-get-directions-panel/dist/assets/index-CIijyEYV.js
diff --git a/dist/samples/routes-get-directions-panel/dist/assets/index-CJOi4J0_.css b/dist/samples/routes-get-directions-panel/dist/assets/index-CJOi4J0_.css
@@ -0,0 +1,5 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */.container{display:flex;flex-direction:row;height:100%;width:100%}.directions-panel-container,.map-container{height:100%;width:50%;font-family:monospace}.directions-panel-container{overflow-y:auto}#map{height:100%}.direction{display:flex;flex-direction:row;gap:1em}.maneuver,.distance{width:25%}.instruction{width:50%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/routes-get-directions-panel/dist/index.html b/dist/samples/routes-get-directions-panel/dist/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_routes_get_directions_panel]-->
+<html>
+
+<head>
+  <title>Get directions with step by step panel</title>
+
+  <script type="module" crossorigin src="./assets/index-CIijyEYV.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-CJOi4J0_.css">
+</head>
+
+<body>
+  <div class="container">
+    <div class="map-container">
+      <div id="map"></div>
+    </div>
+    <div class="directions-container">
+      <div id="directions">
+        <p>Directions</p>
+      </div>
+    </div>
+  </div>
+  <!-- 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>
+<!--[END maps_routes_get_directions_panel]-->