-
Notifications
You must be signed in to change notification settings - Fork 823
/
index.js
109 lines (94 loc) · 3.1 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
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_advanced_markers_animation]
/**
* Returns a random lat lng position within the map bounds.
* @param {!google.maps.Map} map
* @return {!google.maps.LatLngLiteral}
*/
function getRandomPosition(map) {
const bounds = map.getBounds();
const minLat = bounds.getSouthWest().lat();
const minLng = bounds.getSouthWest().lng();
const maxLat = bounds.getNorthEast().lat();
const maxLng = bounds.getNorthEast().lng();
const latRange = maxLat - minLat;
// Note: longitude can span from a positive longitude in the west to a
// negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
// span that covers the whole USA.
let lngRange = maxLng - minLng;
if (maxLng < minLng) {
lngRange += 360;
}
return {
lat: minLat + Math.random() * latRange,
lng: minLng + Math.random() * lngRange,
};
}
const total = 100;
const intersectionObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("drop");
intersectionObserver.unobserve(entry.target);
}
}
});
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
const map = new Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "4504f8b37365c3d0",
});
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, "idle", () => {
for (let i = 0; i < 100; i++) {
createMarker(map, AdvancedMarkerElement);
}
});
// Add a button to reset the example.
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = "Reset the example";
controlUI.addEventListener("click", () => {
// Reset the example by reloading the map iframe.
refreshMap();
});
controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
function createMarker(map, AdvancedMarkerElement) {
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
});
const content = advancedMarker.content;
content.style.opacity = "0";
content.addEventListener("animationend", (event) => {
content.classList.remove("drop");
content.style.opacity = "1";
});
const time = 2 + Math.random(); // 2s delay for easy to see the animation
content.style.setProperty("--delay-time", time + "s");
intersectionObserver.observe(content);
}
function refreshMap() {
// Refresh the map.
const mapContainer = document.getElementById("mapContainer");
const map = document.getElementById("map");
map.remove();
const mapDiv = document.createElement("div");
mapDiv.id = "map";
mapContainer.appendChild(mapDiv);
initMap();
}
initMap();
// [END maps_advanced_markers_animation]