-
Notifications
You must be signed in to change notification settings - Fork 822
/
index.js
133 lines (119 loc) · 3.66 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
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
/**
* @license
* Copyright 2022 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_boundaries_click_event]
let map;
let featureLayer;
let infoWindow;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
// [START maps_boundaries_click_event_handler]
function handleClick(/* MouseEvent */ e) {
lastClickedFeatureIds = e.features.map((f) => f.placeId);
lastInteractedFeatureIds = [];
featureLayer.style = applyStyle;
createInfoWindow(e);
}
function handleMouseMove(/* MouseEvent */ e) {
lastInteractedFeatureIds = e.features.map((f) => f.placeId);
featureLayer.style = applyStyle;
}
// [END maps_boundaries_click_event_handler]
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 39.23, lng: -105.73 },
zoom: 8,
// In the cloud console, configure your Map ID with a style that enables the
// 'Administrative Area Level 2' Data Driven Styling type.
mapId: "a3efe1c035bad51b", // Substitute your own map ID.
mapTypeControl: false,
});
//[START maps_boundaries_click_event_add_layer]
// Add the feature layer.
//@ts-ignore
featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2");
// Add the event listeners for the feature layer.
featureLayer.addListener("click", handleClick);
featureLayer.addListener("mousemove", handleMouseMove);
// Map event listener.
map.addListener("mousemove", () => {
// If the map gets a mousemove, that means there are no feature layers
// with listeners registered under the mouse, so we clear the last
// interacted feature ids.
if (lastInteractedFeatureIds?.length) {
lastInteractedFeatureIds = [];
featureLayer.style = applyStyle;
}
});
//[END maps_boundaries_click_event_add_layer]
// Create the infowindow.
infoWindow = new InfoWindow({});
// Apply style on load, to enable clicking.
featureLayer.style = applyStyle;
}
// Helper function for the infowindow.
async function createInfoWindow(event) {
let feature = event.features[0];
if (!feature.placeId) return;
// Update the infowindow.
const place = await feature.fetchPlace();
let content =
'<span style="font-size:small">Display name: ' +
place.displayName +
"<br/> Place ID: " +
feature.placeId +
"<br/> Feature type: " +
feature.featureType +
"</span>";
updateInfoWindow(content, event.latLng);
}
// [START maps_boundaries_click_event_style]
// Define styles.
// Stroke and fill with minimum opacity value.
const styleDefault = {
strokeColor: "#810FCB",
strokeOpacity: 1.0,
strokeWeight: 2.0,
fillColor: "white",
fillOpacity: 0.1, // Polygons must be visible to receive events.
};
// Style for the clicked polygon.
const styleClicked = {
...styleDefault,
fillColor: "#810FCB",
fillOpacity: 0.5,
};
// Style for polygon on mouse move.
const styleMouseMove = {
...styleDefault,
strokeWeight: 4.0,
};
// Apply styles using a feature style function.
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
const placeId = params.feature.placeId;
//@ts-ignore
if (lastClickedFeatureIds.includes(placeId)) {
return styleClicked;
}
//@ts-ignore
if (lastInteractedFeatureIds.includes(placeId)) {
return styleMouseMove;
}
return styleDefault;
}
// [END maps_boundaries_click_event_style]
// Helper function to create an info window.
function updateInfoWindow(content, center) {
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map,
shouldFocus: false,
});
}
initMap();
// [END maps_boundaries_click_event]