-
Notifications
You must be signed in to change notification settings - Fork 822
/
index.ts
59 lines (51 loc) · 1.88 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
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_advanced_markers_zoom]
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const map = new Map(document.getElementById('map') as HTMLElement, {
center: {lat: 37.424563902650114, lng: -122.09512859577026},
zoom: 17,
mapId: '4504f8b37365c3d0',
});
const marker01 = new AdvancedMarkerElement({
map,
position: { lat: 37.4239163, lng: -122.094 },
title: 'This marker is visible at zoom level 15 and higher.'
});
const marker02 = new AdvancedMarkerElement({
map,
position: { lat: 37.4245, lng: -122.096 },
title: 'This marker is visible at zoom level 16 and higher.'
});
const marker03 = new AdvancedMarkerElement({
map,
position: { lat: 37.4249, lng: -122.095 },
title: 'This marker is visible at zoom level 17 and higher.'
});
const marker04 = new AdvancedMarkerElement({
map,
position: { lat: 37.425, lng: -122.0955 },
title: 'This marker is visible at zoom level 18 and higher.'
});
// [START maps_advanced_markers_zoom_listener]
map.addListener('zoom_changed', () => {
const zoom = map.getZoom();
if (zoom) {
// Only show each marker above a certain zoom level.
marker01.map = zoom > 14 ? map : null;
marker02.map = zoom > 15 ? map : null;
marker03.map = zoom > 16 ? map : null;
marker04.map = zoom > 17 ? map : null;
}
});
// [END maps_advanced_markers_zoom_listener]
}
initMap();
// [END maps_advanced_markers_zoom]
export { };