Skip to content

Commit c56cdb4

Browse files
noelle-jungnoelle-jung
authored
feat: Create (almost) comprehensive Routes library demo (#788)
1 parent 569a934 commit c56cdb4

File tree

6 files changed

+1315
-0
lines changed

6 files changed

+1315
-0
lines changed

‎samples/routes-compute-routes/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
# Google Maps JavaScript Sample
3+
4+
This sample is generated from @googlemaps/js-samples located at
5+
https://github.com/googlemaps-samples/js-api-samples.
6+
7+
## Setup
8+
9+
### Before starting run:
10+
11+
`$npm i`
12+
13+
### Run an example on a local web server
14+
15+
First `cd` to the folder for the sample to run, then:
16+
17+
`$npm start`
18+
19+
### Build an individual example
20+
21+
From `samples/`:
22+
23+
`$npm run build --workspace=sample-name/`
24+
25+
### Build all of the examples.
26+
27+
From `samples/`:
28+
`$npm run build-all`
29+
30+
## Feedback
31+
32+
For feedback related to this sample, please open a new issue on
33+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
34+

‎samples/routes-compute-routes/index.html‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2025 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<html>
8+
9+
<head>
10+
<title>Get routes</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
</head>
15+
16+
<body>
17+
<div class="main-content">
18+
<div class="alert" id="alert">
19+
<p>error</p>
20+
<button class="button-secondary close">&times;</button>
21+
</div>
22+
<div class="control-panel">
23+
<form id="compute-routes-form">
24+
<section>
25+
<h2>Input locations</h2>
26+
<div class="row">
27+
<div class="location-input-wrapper">
28+
<label class="text">Origin*</label>
29+
<div id="origin-input"></div>
30+
</div>
31+
<div class="heading-wrapper">
32+
<label for="heading_org" class="text">Heading</label>
33+
<input type="text" id="heading_org" name="heading_org" value="" />
34+
</div>
35+
</div>
36+
<div class="row">
37+
<div class="location-options-wrapper">
38+
<input type="checkbox" id="origin_stopover" name="origin_stopover" />
39+
<label for="origin_stopover">Stopover</label>
40+
<input type="checkbox" id="side_of_road_org" name="origin_side_of_road" />
41+
<label for="side_of_road_org">Side of Road</label>
42+
</div>
43+
</div>
44+
<hr />
45+
<div class="row">
46+
<div class="location-input-wrapper">
47+
<label class="text">Destination*</label>
48+
<div id="destination-input"></div>
49+
</div>
50+
<div class="heading-wrapper">
51+
<label for="heading_des" class="text">Heading</label>
52+
<input type="text" id="heading_des" name="heading_des" value="" />
53+
</div>
54+
</div>
55+
<div class="row">
56+
<div class="location-options-wrapper">
57+
<input type="checkbox" id="destination_stopover" name="destination_stopover" />
58+
<label for="destination_stopover">Stopover</label>
59+
<input type="checkbox" id="side_of_road_des" name="destination_side_of_road" />
60+
<label for="side_of_road_des">Side of Road</label>
61+
</div>
62+
</div>
63+
</section>
64+
<section>
65+
<h2>Travel Mode</h2>
66+
<div class="row">
67+
<div class="travel-mode-wrapper">
68+
<select name="travel_mode" id="travel-mode">
69+
<option value="DRIVING">Driving</option>
70+
<option value="WALKING">Walking</option>
71+
<option value="BICYCLING">Bicycling</option>
72+
<option value="TWO_WHEELER">Two Wheeler (two-wheeled motorized vehicle)</option>
73+
<option value="TRANSIT">Transit</option>
74+
</select>
75+
</div>
76+
</div>
77+
78+
<div class="row" id="transit-options" style="display: none">
79+
<div class="transit-modes-wrapper">
80+
<h3>Transit Modes</h3>
81+
<ul id="transitModes">
82+
<li>
83+
<input type="checkbox" name="bus" value="BUS" id="bus" checked />
84+
<label for="bus">Bus</label>
85+
</li>
86+
<li>
87+
<input type="checkbox" name="subway" value="SUBWAY" id="subway" checked />
88+
<label for="subway">Subway</label>
89+
</li>
90+
<li>
91+
<input type="checkbox" name="train" value="TRAIN" id="train" checked />
92+
<label for="train">Train</label>
93+
</li>
94+
<li>
95+
<input type="checkbox" name="light_rail" value="LIGHT_RAIL" id="light_rail" checked />
96+
<label for="light_rail">Light rail</label>
97+
</li>
98+
</ul>
99+
</div>
100+
<div class="transit-routing-preference-wrapper">
101+
<h3>Transit Routing Preference</h3>
102+
<select name="transit_preference" id="transitPreference">
103+
<option value=""></option>
104+
<option value="LESS_WALKING">Less walking</option>
105+
<option value="FEWER_TRANSFERS">Fewer transfers</option>
106+
</select>
107+
</div>
108+
</div>
109+
</section>
110+
<section>
111+
<h2>Departure Time (Your local time)</h2>
112+
<p>
113+
Choose your <b>local time</b>. The selected time will be converted to
114+
<b>UTC format time</b>.
115+
</p>
116+
<p>
117+
If you set the departure time, the routing preference has to be either TRAFFIC_AWARE
118+
or TRAFFIC_AWARE_OPTIMAL. TRAFFIC_AWARE_OPTIMAL calculates best routes by factoring in
119+
real-time road conditions, including closures.
120+
</p>
121+
<div class="row">
122+
<div class="departure-time-wrapper">
123+
<input type="datetime-local" id="departure-time" name="departure_time" />
124+
<p id="utc-output"></p>
125+
</div>
126+
</div>
127+
</section>
128+
<section>
129+
<h2>Route Options</h2>
130+
<div class="row">
131+
<div class="route-options-wrapper">
132+
<div class="row">
133+
<h3 class="route-option-name-wrapper">Polyline Quality</h3>
134+
<select class="route-option-input" name="polyline_quality" id="polyline_quality">
135+
<option value=""></option>
136+
<option value="HIGH_QUALITY">High quality</option>
137+
<option value="OVERVIEW">Overview</option>
138+
</select>
139+
</div>
140+
<div class="row">
141+
<h3 class="route-option-name-wrapper">Traffic Awareness</h3>
142+
<select class="route-option-input" name="routing_preference" id="routing-preference">
143+
<option value=""></option>
144+
<option value="TRAFFIC_UNAWARE">Traffic unaware</option>
145+
<option value="TRAFFIC_AWARE">Traffic aware</option>
146+
<option value="TRAFFIC_AWARE_OPTIMAL">
147+
Traffic aware optimal (best routes with accurate ETA)
148+
</option>
149+
</select>
150+
</div>
151+
152+
<div class="row">
153+
<h3 class="route-option-name-wrapper">Traffic Aware Polyline</h3>
154+
<div class="route-option-input">
155+
<input type="checkbox" name="traffic_aware_polyline" id="traffic-aware-polyline" disabled />
156+
<label for="traffic-aware-polyline"></label>
157+
</div>
158+
</div>
159+
</div>
160+
<div class="route-options-wrapper">
161+
<h3>Route Modifiers</h3>
162+
<ul>
163+
<li>
164+
<input type="checkbox" name="avoid_tolls" value="avoid_tolls" id="avoid_tolls" />
165+
<label for="avoid_tolls">Avoid tolls</label>
166+
</li>
167+
<li>
168+
<input type="checkbox" name="avoid_highways" value="avoid_highways" id="avoid_highways" />
169+
<label for="avoid_highways">Avoid highways</label>
170+
</li>
171+
<li>
172+
<input type="checkbox" name="avoid_ferries" value="avoid_ferries" id="avoid_ferries" />
173+
<label for="avoid_ferries">Avoid ferries</label>
174+
</li>
175+
<li>
176+
<input type="checkbox" name="avoid_indoor" value="avoid_indoor" id="avoid_indoor" />
177+
<label for="avoid_indoor">Avoid indoor</label>
178+
</li>
179+
</ul>
180+
</div>
181+
</div>
182+
</section>
183+
184+
<section>
185+
<h2>Reference routes</h2>
186+
<div class="row">
187+
<div>
188+
<input type="checkbox" name="compute_alternative_routes" id="compute_alternative_routes" />
189+
<label for="compute_alternative_routes">Alternative Routes</label>
190+
</div>
191+
</div>
192+
<div class="row">
193+
<div>
194+
<input type="checkbox" name="shorter_distance" id="shorter_distance" />
195+
<label for="shorter_distance">Shorter Distance Routes</label>
196+
</div>
197+
</div>
198+
199+
<hr />
200+
201+
<div class="row">
202+
<div class="eco-friendly-options-wrapper">
203+
<div>
204+
<input type="checkbox" name="eco_routes" id="eco-routes" />
205+
<label for="eco-routes">Eco-friendly Routes</label>
206+
</div>
207+
</div>
208+
<div class="eco-friendly-options-wrapper" id="enginetype">
209+
<h3>Emission Type</h3>
210+
<select name="emission_type" id="emission-type" disabled>
211+
<option value="GASOLINE">Gasoline</option>
212+
<option value="ELECTRIC">Electric</option>
213+
<option value="HYBRID">Hybrid</option>
214+
<option value="DIESEL">Diesel</option>
215+
</select>
216+
</div>
217+
</div>
218+
</section>
219+
220+
<section>
221+
<h2>Fields</h2>
222+
<div class="row" id="field-mask">
223+
<div>
224+
<h3>Fields</h3>
225+
<ul id="fields">
226+
<li>
227+
<input type="checkbox" name="route_labels" value="routeLabels" id="route_labels" checked disabled />
228+
<label for="route_labels">routeLabels</label>
229+
</li>
230+
<li>
231+
<input type="checkbox" name="legs" value="legs" id="legs" checked />
232+
<label for="legs">legs</label>
233+
</li>
234+
<li>
235+
<input type="checkbox" name="distance_meters" value="distanceMeters" id="distance_meters" />
236+
<label for="distance_meters">distanceMeters</label>
237+
</li>
238+
<li>
239+
<input type="checkbox" name="duration_millis" value="durationMillis" id="duration_millis" />
240+
<label for="duration_millis">durationMillis</label>
241+
</li>
242+
<li>
243+
<input type="checkbox" name="static_duration_millis" value="staticDurationMillis"
244+
id="static_duration_millis" />
245+
<label for="static_duration_millis">staticDurationMillis</label>
246+
</li>
247+
<li>
248+
<input type="checkbox" name="path" value="path" id="path" checked disabled />
249+
<label for="path">path</label>
250+
</li>
251+
<li>
252+
<input type="checkbox" name="polyline_details" value="polylineDetails" id="polyline_details" />
253+
<label for="polyline_details">polylineDetails</label>
254+
</li>
255+
<li>
256+
<input type="checkbox" name="description" value="description" id="description" />
257+
<label for="description">description</label>
258+
</li>
259+
<li>
260+
<input type="checkbox" name="warnings" value="warnings" id="warnings" />
261+
<label for="warnings">warnings</label>
262+
</li>
263+
<li>
264+
<input type="checkbox" name="viewport" value="viewport" id="viewport" checked disabled />
265+
<label for="viewport">viewport</label>
266+
</li>
267+
<li>
268+
<input type="checkbox" name="travel_advisory" value="travelAdvisory" id="travel_advisory" />
269+
<label for="travel_advisory">travelAdvisory</label>
270+
</li>
271+
<li>
272+
<input type="checkbox" name="optimized_intermediate_waypoint_indices"
273+
value="optimizedIntermediateWaypointIndices" id="optimized_intermediate_waypoint_indices" />
274+
<label for="optimized_intermediate_waypoint_indices">optimizedIntermediateWaypointIndices</label>
275+
</li>
276+
<li>
277+
<input type="checkbox" name="localized_values" value="localizedValues" id="localized_values" checked
278+
disabled />
279+
<label for="localized_values">localizedValues</label>
280+
</li>
281+
<li>
282+
<input type="checkbox" name="route_token" value="routeToken" id="route_token" />
283+
<label for="route_token">routeToken</label>
284+
</li>
285+
<li>
286+
<input type="checkbox" name="speed_paths" value="speedPaths" id="speed_paths" />
287+
<label for="speed_paths">speedPaths</label>
288+
</li>
289+
</ul>
290+
</div>
291+
</div>
292+
</section>
293+
294+
<section>
295+
<div class="row">
296+
<button class="button-primary" type="submit">Get routes</button>
297+
</div>
298+
</section>
299+
</form>
300+
</div>
301+
<div class="map-container">
302+
<gmp-map id="map" class="map" center="-34.397, 150.644" zoom="4" map-id="DEMO_MAP_ID"></gmp-map>
303+
</div>
304+
</div>
305+
<!-- prettier-ignore -->
306+
<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)) })
307+
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
308+
</body>
309+
</html>

0 commit comments

Comments
 (0)