-
Notifications
You must be signed in to change notification settings - Fork 0
/
MarkerClustering.html
115 lines (104 loc) · 5.68 KB
/
MarkerClustering.html
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
<!--
Here, we will see how to use marker clusters to display a large number of markers on
map. You can use the MarkerClusterer library in combination with Google Maps JavaScript
API to combine markers of close proximity into clusters, and simplify the display
of markers on the map.
The number on a cluster indicates how many markers it contains. Notice that as you zoom into
any of the cluster locations, the number on cluster decreases, and you begin to see the
individual markers on the map. Zooming out of the map consolidates the markers into clusters
again.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marker Clustering in Google Maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<style type="text/css">
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h3>Google Map with Marker Clustering</h3>
<div id="map"></div>
<script type="text/javascript">
// initMap function initializes and adds map when the web page loads.
function initMap() {
// array of marker locations
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
];
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -28.024, lng: 140.887}, // center property tells API where to center the map
zoom: 3 // specifies zoom level for map
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to create an
// array of markers based on a given "locations" array. The map() method here has
// nothing to do with Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to map in order to manage the markers
// It passes the markers array to MarkerClusterer and also specifies the location of all
// five image files in "imagePath" parameter.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>
<!--
####################################
Understanding the marker clustering
####################################
The "MarkerClusterer" library uses the grid-based clustering technique that divides the map
into squares of a certain size (the size changes at each zoom level), and groups the markers
into each square grid. It creates a cluster at a particular marker, and adds markers that are
in its bounds to the cluster. It repeats this process until all markers are allocated to the
closest grid-based marker clusters based on map's zoom level. If markers are in the bounds of
more than one existing cluster, the Maps JavaScript API determines the marker's distance
from each cluster, and adds it to the closest cluster.
You can set a "MarkerClusterer" option to adjust the cluster position to reflect the average
distance between all the markers that are contained within it. You can also customize the
"MarkerClusterer" to modify other parameters like the grid size, cluster icon and cluster text.
##########################
Adding a marker clusterer
##########################
Add the marker clustering library to your page.
-->
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgncHE9ehCiKENUJB0y19GURax6WXqk&callback=initMap" async defer></script>
</body>
</html>