Marker Clustering

When you have a lot of overlapping makers on a map they tend to become hard to read and navigate. The solution to this problem is usually "marker clustering". This is when you group nearby markers into clusters. As the user zooms the map in and out, these clusters will combine and separate to make the map much easier to read and navigate. To add marker clusters simply pass the clustering parameter as true to the map and each marker you want to cluster. It's important to note that you must pass the clustering parameter to both the map and each marker. This also makes it possible to cluster some markers on the map, while omitting others.

Note, the follow clustering options are completely optional. The values shown are the default.

{% set options = {
	id: 'map', 
	width: '400px', 
	height: '300px',
	clustering: true,
	clusteringOptions: {
		gridSize: 60,
		maxZoom: null,
		zoomOnClick: true,
		averageCenter: false,
		minimumClusterSize: 2,
		styles: [{
			height: 53,
			url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
			width: 53,
			anchor: [0, 0],
			textColor: '#000',
			textSize: 11,
			backgroundPosition: '0px 0px'
		},{
			height: 56,
			url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
			width: 56,
			anchor: [0, 0],
			textColor: '#000',
			textSize: 11,
			backgroundPosition: '0px 0px'
		},{
			height: 66,
			url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
			width: 66,
			anchor: [0, 0],
			textColor: '#000',
			textSize: 11,
			backgroundPosition: '0px 0px'
		},{
			height: 78,
			url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
			width: 78,
			anchor: [0, 0],
			textColor: '#000',
			textSize: 11,
			backgroundPosition: '0px 0px'
		},{
			height: 90,
			url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
			width: 90,
			anchor: [0, 0],
			textColor: '#000',
			textSize: 11,
			backgroundPosition: '0px 0px'
		}]
	}
} %}

{{ craft.googleMaps.map(options) }}

{% set marker = {
	address: 'Rocky Mountain National Park',
	content: 'Rocky Mountain National Park',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'Yellow Stone National Park',
	content: 'Yellow Stone National Park',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'Grand Canyon',
	content: 'Grand Canyon',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'New Mexico',
	content: 'New Mexico',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'Portland, OR',
	content: 'Portland, OR',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'Seattle, WA',
	content: 'Seattle, WA',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}

{% set marker = {
	address: 'Montana',
	content: 'Montana',
	clustering: true
} %}

{{ craft.googleMaps.marker('map', marker) }}