-
Notifications
You must be signed in to change notification settings - Fork 815
/
index.js
95 lines (83 loc) · 2.4 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
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let mapLeft, mapRight;
// [START maps_split_map_panes]
function initMap() {
const mapOptions = {
center: { lat: 44.5250489, lng: -110.83819 },
zoom: 18,
scaleControl: false,
streetViewControl: false,
};
// instantiate the map on the left with control positioning
mapLeft = new google.maps.Map(document.getElementById("map-left"), {
...mapOptions,
mapTypeId: "satellite",
tilt: 0,
fullscreenControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
},
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
});
// instantiate the map on the right with control positioning
mapRight = new google.maps.Map(document.getElementById("map-right"), {
...mapOptions,
fullscreenControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM,
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM,
},
});
// helper function to keep maps in sync
function sync(...maps) {
let center, zoom;
function update(changedMap) {
maps.forEach((m) => {
if (m === changedMap) {
return;
}
m.setCenter(center);
m.setZoom(zoom);
});
}
maps.forEach((m) => {
m.addListener("bounds_changed", () => {
const changedCenter = m.getCenter();
const changedZoom = m.getZoom();
if (changedCenter !== center || changedZoom !== zoom) {
center = changedCenter;
zoom = changedZoom;
update(m);
}
});
});
}
sync(mapLeft, mapRight);
function handleContainerResize() {
const width = document.getElementById("container").offsetWidth;
document.getElementById("map-left").style.width = `${width}px`;
document.getElementById("map-right").style.width = `${width}px`;
}
// trigger to set map container size since using absolute
handleContainerResize();
// add event listener
window.addEventListener("resize", handleContainerResize);
//@ts-ignore
Split(["#left", "#right"], {
sizes: [50, 50],
});
}
window.initMap = initMap;
// [END maps_split_map_panes]