Skip to content

Commit c83f651

Browse files
author
bdcoder2
authored
Add files via upload
1 parent ae92f1b commit c83f651

File tree

2 files changed

+404
-1
lines changed

2 files changed

+404
-1
lines changed

‎v180/ex3/index.html‎

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,157 @@
1-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Grid Clusterer v1.8.0 - Enabling and disabling cluster marker click checks</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link rel="preconnect" href="https://ajax.googleapis.com" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Kalam:300,400%7CSource+Sans+Pro:300,400,600,700" />
11+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
12+
<script src="../js/grid_clusterer.min.js"></script>
13+
<script src="tester.js"></script>
14+
<style>
15+
body, html {
16+
background-color: #FFFFFF;
17+
margin: 0;
18+
padding: 0;
19+
font-family: Roboto, Helvetica, sans-serif;
20+
}
21+
22+
form {
23+
margin: 0;
24+
}
25+
26+
header {
27+
border-bottom: 1px solid #AAAAAA;
28+
font-size: 16pt;
29+
font-weight: bold;
30+
margin: 6px 12px 0 12px;
31+
padding: 6px;
32+
text-align: center;
33+
}
34+
35+
main {
36+
margin: 0;
37+
padding: 6px 12px;
38+
}
39+
40+
section {
41+
margin: 0;
42+
padding: 12px 12px 0 12px;
43+
}
44+
45+
.map_viewport {
46+
height: 514px;
47+
width: 100%;
48+
position: relative;
49+
background: #EFEFEF;
50+
display: block;
51+
overflow: hidden;
52+
border: 1px solid #AAAAAA;
53+
margin: 6px 0;
54+
padding: 0;
55+
}
56+
57+
.map_footer {
58+
margin: 2px;
59+
padding: 4px;
60+
text-align:center;
61+
}
62+
63+
.test_div {
64+
margin: 0 0 0 20px;
65+
padding: 6px;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<header>
71+
<a href="../index.html"><b>Grid Clusterer v1.8.0</b></a> - Enabling and disabling cluster marker click checks
72+
</header>
73+
<main>
74+
<div class="map_viewport" id="mvp"></div>
75+
<div class="map_footer">
76+
Map Zoom Level: <span id="mzl" style="margin: 0 20px 0 0;font-weight:bold;"></span>
77+
<input type="checkbox" id="cb_sdp" value="1">
78+
<label for="cb_sdp">Show data points</label>
79+
</div>
80+
<section>
81+
<p>
82+
When cluster marker click checks are enabled (the default), the default cluster marker click handler will check
83+
if the same cluster marker is still present on the map AFTER the click event, and if so, will zoom in one level.
84+
You may customize the action(s) taken when a cluster marker is clicked as needed
85+
(see: <a href="../reference.html#i5_grid_clusterer_options">Clusterer Reference - Options</a>)
86+
</p>
87+
</section>
88+
<section>
89+
<form id="frm2" onsubmit="tester_obj.config_update( event );">
90+
<input type="radio" id="rbtn2" name="fld_cluster_marker_click_checks" value="1" checked>
91+
<label for="rbtn2"><b>Enable cluster marker click checks</b></label>
92+
<div class="test_div">
93+
Test:
94+
<ol>
95+
<li>
96+
Make sure the map zoom level is set to: <b>7</b>.
97+
</li>
98+
<li>
99+
Click the cluster marker. The default cluster marker click handler calls the Google maps
100+
<a href="https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds" target="_blank">fitBounds()</a>
101+
method. The clusterer will check if the tile containing the cluster marker that was clicked is still present, and if so, will
102+
automatically &quot;zoom-in&quot; one level.
103+
</li>
104+
</ol>
105+
Test:
106+
<ol>
107+
<li>Change the map to zoom level to: <b>5</b>, or any level less than 7.</li>
108+
<li>
109+
Click the cluster marker. The map will &quot;zoom-in&quot; so the data points fit in the map;
110+
the map zoom level changes from 5 to 7 as a direct result of calling the Google maps .fitBounds() method.
111+
Clicking on the cluster marker again (at zoom level 7) will cause the map to &quot;zoom-in&quot;
112+
one level, as explained in the previous test above.
113+
</li>
114+
</ol>
115+
</div>
116+
<input type="radio" id="rbtn1" name="fld_cluster_marker_click_checks" value="0">
117+
<label for="rbtn1"><b>Disable cluster marker click checks</b></label>
118+
<div class="test_div">
119+
Test:
120+
<ol>
121+
<li>
122+
Make sure the map zoom level is set to: <b>7</b>.
123+
</li>
124+
<li>
125+
Click the cluster marker. The map will NOT &quot;zoom-in&quot;, because the bounds of the
126+
data points already fit in the map, i.e.: the Google maps .fitBounds() method is called, but
127+
no action is taken by the map because the data points already fit (the individual data points
128+
will be shown on the map to illustrate).
129+
</li>
130+
</ol>
131+
Test 2:
132+
<ol>
133+
<li>
134+
Change the map to zoom level to: <b>5</b>, or any level less than 7.
135+
</li>
136+
<li>
137+
Click the cluster marker. The map will &quot;zoom-in&quot; so the data points fit in the map;
138+
the map zoom level will change from 5 to 7 as a direct result of calling the Google maps .fitBounds()
139+
method. Clicking on the cluster marker again (at zoom level 7) will have no effect, as explained
140+
in the previous test above.
141+
</li>
142+
</ol>
143+
</div>
144+
</form>
145+
</section>
146+
</main>
147+
<script>
148+
async function map_init() {
149+
const { Map } = await google.maps.importLibrary("maps");
150+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
151+
tester_obj = new tester( 'mvp' );
152+
}
153+
</script>
154+
<!-- Async script executes immediately and must be AFTER any DOM elements used in callback. -->
155+
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1RpoB4WdH8GQ6odWnELHcnDg6tQi8KWE&loading=async&callback=map_init"></script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)