/
index.js
96 lines (90 loc) · 2.91 KB
/
index.js
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
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_event_poi]
function initMap() {
const origin = { lat: -33.871, lng: 151.197 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: origin,
});
new ClickEventHandler(map, origin);
}
function isIconMouseEvent(e) {
return "placeId" in e;
}
class ClickEventHandler {
origin;
map;
directionsService;
directionsRenderer;
placesService;
infowindow;
infowindowContent;
constructor(map, origin) {
this.origin = origin;
this.map = map;
this.directionsService = new google.maps.DirectionsService();
this.directionsRenderer = new google.maps.DirectionsRenderer();
this.directionsRenderer.setMap(map);
this.placesService = new google.maps.places.PlacesService(map);
this.infowindow = new google.maps.InfoWindow();
this.infowindowContent = document.getElementById("infowindow-content");
this.infowindow.setContent(this.infowindowContent);
// Listen for clicks on the map.
this.map.addListener("click", this.handleClick.bind(this));
}
handleClick(event) {
console.log("You clicked on: " + event.latLng);
// If the event has a placeId, use it.
if (isIconMouseEvent(event)) {
console.log("You clicked on place:" + event.placeId);
// Calling e.stop() on the event prevents the default info window from
// showing.
// If you call stop here when there is no placeId you will prevent some
// other map click event handlers from receiving the event.
event.stop();
if (event.placeId) {
this.calculateAndDisplayRoute(event.placeId);
this.getPlaceInformation(event.placeId);
}
}
}
calculateAndDisplayRoute(placeId) {
const me = this;
this.directionsService
.route({
origin: this.origin,
destination: { placeId: placeId },
travelMode: google.maps.TravelMode.WALKING,
})
.then((response) => {
me.directionsRenderer.setDirections(response);
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
getPlaceInformation(placeId) {
const me = this;
this.placesService.getDetails({ placeId: placeId }, (place, status) => {
if (
status === "OK" &&
place &&
place.geometry &&
place.geometry.location
) {
me.infowindow.close();
me.infowindow.setPosition(place.geometry.location);
me.infowindowContent.children["place-icon"].src = place.icon;
me.infowindowContent.children["place-name"].textContent = place.name;
me.infowindowContent.children["place-id"].textContent = place.place_id;
me.infowindowContent.children["place-address"].textContent =
place.formatted_address;
me.infowindow.open(me.map);
}
});
}
}
window.initMap = initMap;
// [END maps_event_poi]