-
Notifications
You must be signed in to change notification settings - Fork 823
/
index.ts
139 lines (124 loc) · 3.85 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_directions_complex]
function initMap(): void {
const markerArray: google.maps.Marker[] = [];
// Instantiate a directions service.
const directionsService = new google.maps.DirectionsService();
// Create a map and center it on Manhattan.
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 13,
center: { lat: 40.771, lng: -73.974 },
}
);
// Create a renderer for directions and bind it to the map.
const directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
// Instantiate an info window to hold step text.
const stepDisplay = new google.maps.InfoWindow();
// Display the route between the initial start and end selections.
calculateAndDisplayRoute(
directionsRenderer,
directionsService,
markerArray,
stepDisplay,
map
);
// Listen to change events from the start and end lists.
const onChangeHandler = function () {
calculateAndDisplayRoute(
directionsRenderer,
directionsService,
markerArray,
stepDisplay,
map
);
};
(document.getElementById("start") as HTMLElement).addEventListener(
"change",
onChangeHandler
);
(document.getElementById("end") as HTMLElement).addEventListener(
"change",
onChangeHandler
);
}
function calculateAndDisplayRoute(
directionsRenderer: google.maps.DirectionsRenderer,
directionsService: google.maps.DirectionsService,
markerArray: google.maps.Marker[],
stepDisplay: google.maps.InfoWindow,
map: google.maps.Map
) {
// First, remove any existing markers from the map.
for (let i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
directionsService
.route({
origin: (document.getElementById("start") as HTMLInputElement).value,
destination: (document.getElementById("end") as HTMLInputElement).value,
travelMode: google.maps.TravelMode.WALKING,
})
.then((result: google.maps.DirectionsResult) => {
// Route the directions and pass the response to a function to create
// markers for each step.
(document.getElementById("warnings-panel") as HTMLElement).innerHTML =
"<b>" + result.routes[0].warnings + "</b>";
directionsRenderer.setDirections(result);
showSteps(result, markerArray, stepDisplay, map);
})
.catch((e) => {
window.alert("Directions request failed due to " + e);
});
}
function showSteps(
directionResult: google.maps.DirectionsResult,
markerArray: google.maps.Marker[],
stepDisplay: google.maps.InfoWindow,
map: google.maps.Map
) {
// For each step, place a marker, and add the text to the marker's infowindow.
// Also attach the marker to an array so we can keep track of it and remove it
// when calculating new routes.
const myRoute = directionResult!.routes[0]!.legs[0]!;
for (let i = 0; i < myRoute.steps.length; i++) {
const marker = (markerArray[i] =
markerArray[i] || new google.maps.Marker());
marker.setMap(map);
marker.setPosition(myRoute.steps[i].start_location);
attachInstructionText(
stepDisplay,
marker,
myRoute.steps[i].instructions,
map
);
}
}
function attachInstructionText(
stepDisplay: google.maps.InfoWindow,
marker: google.maps.Marker,
text: string,
map: google.maps.Map
) {
google.maps.event.addListener(marker, "click", () => {
// Open an info window when the marker is clicked on, containing the text
// of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// [END maps_directions_complex]
export {};