Marker Clustering

Overview

This tutorial shows you how to use marker clusters to display a large number of markers on a map.
You can use the
MarkerClusterer
library in combination with the Maps JavaScript API to combine
markers of close proximity into clusters, and simplify the display of markers
on the map.

To see how marker clustering works, view the map below.

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 the cluster decreases, and you begin to see the individual
markers on the map. Zooming out of the map consolidates the markers into clusters again.

As a simple illustration, this tutorial adds a set of markers to the map using the
locations array. You can use other sources to get markers for your map.
For more information, read the guide to
creating markers.

Understanding 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 the 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, the cluster icon, cluster text, among others.

Adding a marker clusterer

Follow the steps below to add a marker clusterer:

Get the marker clustering library and images from GitHub, and store them on a server accessible
to your app.
The JavaScript library and image files for the MarkerClusterer are available in the
Google
Maps repo on GitHub.
Download or copy the following files from GitHub to a location accessible to your app:

This sample passes the markers array to the MarkerClusterer.
It also specifies the location of all five image files in the imagePath parameter.
Replace this with the path to the location where you have saved the same image files.