Cluster mark
Overview
This tutorial will show you how to use a cluster of markers to display a large number of markers on the map. You can MarkerClustererPlus library and Maps JavaScript API used in conjunction with the close marking merge into the cluster, and simplify the display marked on the map.
To see the works marked clustering, please see the map below.
Number indicates the number of clusters on which tag contains. Please note that when you zoom in on any location of the cluster, the cluster numbers will decrease, and begin to see the individual markers on the map. Out of the map will be marked again merged into the cluster.
The following example shows the creation of all the code required for this mapping.
Tip: View NYC Subway Locator solutions to see more examples marked clustering.
Try it yourself
You can click <>to try this code in JSFiddle in the top right corner of the code window.
<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
<span style="color:#3b78e7"><head></span>
<span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">name</span>=<span style="color:#0d904f">"viewport"</span> <span style="color:#9c27b0">content</span>=<span style="color:#0d904f">"initial-scale=1.0, user-scalable=no"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"><meta</span> <span style="color:#9c27b0">charset</span>=<span style="color:#0d904f">"utf-8"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"><title></span>Marker Clustering<span style="color:#3b78e7"></title></span>
<span style="color:#3b78e7"><style></span>
<span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div
* element that contains the map. */</span>
#map {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
}
<span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>
html, body {
<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;
<span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;
<span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;
}
<span style="color:#3b78e7"></style></span>
<span style="color:#3b78e7"></head></span>
<span style="color:#3b78e7"><body></span>
<span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
<span style="color:#3b78e7"><script></span>
<span style="color:#3b78e7">function</span> initMap() {
<span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
zoom: <span style="color:#c53929">3</span>,
center: {lat: -<span style="color:#c53929">28.024</span>, lng: <span style="color:#c53929">140.887</span>}
});
<span style="color:#d81b60">// Create an array of alphabetical characters used to label the markers.</span>
<span style="color:#3b78e7">var</span> labels = <span style="color:#0d904f">'ABCDEFGHIJKLMNOPQRSTUVWXYZ'</span>;
<span style="color:#d81b60">// Add some markers to the map.</span>
<span style="color:#d81b60">// Note: The code uses the JavaScript Array.prototype.map() method to</span>
<span style="color:#d81b60">// create an array of markers based on a given "locations" array.</span>
<span style="color:#d81b60">// The map() method here has nothing to do with the Google Maps API.</span>
<span style="color:#3b78e7">var</span> markers = locations.map(<span style="color:#3b78e7">function</span>(location, i) {
<span style="color:#3b78e7">return</span> <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({
position: location,
label: labels[i % labels.length]
});
});
<span style="color:#d81b60">// Add a marker clusterer to manage the markers.</span>
<span style="color:#3b78e7">var</span> markerCluster = <span style="color:#3b78e7">new</span> <span style="color:#9c27b0">MarkerClusterer</span>(map, markers,
{imagePath: <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'</span>});
}
<span style="color:#3b78e7">var</span> locations = [
{lat: -<span style="color:#c53929">31.563910</span>, lng: <span style="color:#c53929">147.154312</span>},
{lat: -<span style="color:#c53929">33.718234</span>, lng: <span style="color:#c53929">150.363181</span>},
{lat: -<span style="color:#c53929">33.727111</span>, lng: <span style="color:#c53929">150.371124</span>},
{lat: -<span style="color:#c53929">33.848588</span>, lng: <span style="color:#c53929">151.209834</span>},
{lat: -<span style="color:#c53929">33.851702</span>, lng: <span style="color:#c53929">151.216968</span>},
{lat: -<span style="color:#c53929">34.671264</span>, lng: <span style="color:#c53929">150.863657</span>},
{lat: -<span style="color:#c53929">35.304724</span>, lng: <span style="color:#c53929">148.662905</span>},
{lat: -<span style="color:#c53929">36.817685</span>, lng: <span style="color:#c53929">175.699196</span>},
{lat: -<span style="color:#c53929">36.828611</span>, lng: <span style="color:#c53929">175.790222</span>},
{lat: -<span style="color:#c53929">37.750000</span>, lng: <span style="color:#c53929">145.116667</span>},
{lat: -<span style="color:#c53929">37.759859</span>, lng: <span style="color:#c53929">145.128708</span>},
{lat: -<span style="color:#c53929">37.765015</span>, lng: <span style="color:#c53929">145.133858</span>},
{lat: -<span style="color:#c53929">37.770104</span>, lng: <span style="color:#c53929">145.143299</span>},
{lat: -<span style="color:#c53929">37.773700</span>, lng: <span style="color:#c53929">145.145187</span>},
{lat: -<span style="color:#c53929">37.774785</span>, lng: <span style="color:#c53929">145.137978</span>},
{lat: -<span style="color:#c53929">37.819616</span>, lng: <span style="color:#c53929">144.968119</span>},
{lat: -<span style="color:#c53929">38.330766</span>, lng: <span style="color:#c53929">144.695692</span>},
{lat: -<span style="color:#c53929">39.927193</span>, lng: <span style="color:#c53929">175.053218</span>},
{lat: -<span style="color:#c53929">41.330162</span>, lng: <span style="color:#c53929">174.865694</span>},
{lat: -<span style="color:#c53929">42.734358</span>, lng: <span style="color:#c53929">147.439506</span>},
{lat: -<span style="color:#c53929">42.734358</span>, lng: <span style="color:#c53929">147.501315</span>},
{lat: -<span style="color:#c53929">42.735258</span>, lng: <span style="color:#c53929">147.438000</span>},
{lat: -<span style="color:#c53929">43.999792</span>, lng: <span style="color:#c53929">170.463352</span>}
]
<span style="color:#3b78e7"></script></span>
<span style="color:#d81b60"><!-- Replace following script src --></span>
<span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"/maps/documentation/javascript/examples/markerclusterer/[email protected]"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
<span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>As a simple illustration, this tutorial uses locationsan array of a set of tags added to the map. You can use other sources to obtain the map marker. For more information, please read about create tags guide.
Learn marked clustering
The MarkerClustererPluslibrary grid based clustering, the technology will map into a square of a certain size (the size for each zoom level will change), and each square marked packets to the grid. It creates the cluster at a particular mark, the mark is added to the cluster and bounds. It will repeat this process until the zoom level of the map will be assigned to the nearest mark all tag-based cluster grid. If the range of numerals existing in more than one cluster, the Maps JavaScript API will determine the distance to each cluster of markers, and add it to the nearest cluster.
You can set an MarkerClustereroption to adjust the position of the cluster to reflect the average distance between all the tags contained therein. You can also customize MarkerClustererto modify other parameters, such as mesh size, cluster icons, text and other cluster.
Clustering is add a tag
Please add the cluster is marked as follows:
- Gets the tag library and gather images from GitHub, and stores them on the server your application can access.
JavaScript libraries and image files located on GitHubMarkerClustererof Google Maps repository . Download the following files from GitHub or copy it to the location of your application can access: - Add the tag library to gather your page.
In the code of this tutorial, the following script to load the
MarkerClustererPluslibrary.<span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"</span><span style="color:#3b78e7">></span> </span> - Add a tag cluster in your application.
The following code is added to the map markers cluster.
<span style="color:#37474f"><span style="color:#3b78e7">var</span> markerCluster = <span style="color:#3b78e7">new</span> <span style="color:#9c27b0">MarkerClusterer</span>(map, markers, {imagePath: <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'</span>}); </span>This example
markersarray toMarkerClusterer. It alsoimagePathspecifies the location of all five image files parameter. To replace the image file saving location of the same path.
