Example 19 - Clustered Tags

Here we will demonstrate the Google Maps JSP Taglibrary's ability to cluster tags. Clustering is needed when multiple markers are too close together to be individually viewed, or there are so many markers that the map loads slowly. Clustering is done by having a single marker represent multiple markers at low zoom levels. As the viewer zooms in closer, the clustered tag is replaced by the individual markers.

To use the cluster tag, you will need to download the Clusterer.js (or Clusterer2.js for version 2 maps) script written by Jef Poskanzer and place it somewhere within your website. Remember where you've placed it as you'll need to reference it in the <googlemaps:cluster> tag.

How the tags are clustered depends on how you set the attributes in the <googlemaps:cluster> tag. You can tailor it to match your needs. You can also specify a special cluster marker icon, so users can tell that a marker actually represents a group of points.

This map is our traffic tag map (from example_13) but we've clustered the tags together. We've used our special "G" icon to designate a clustered tag. Go ahead and zoom in! On a bad day there might be over 100 markers on this map!

Here's the code we used:

<googlemaps:map id="map" width="780" height="300" version="2" type="STREET" zoom="8">
  	<googlemaps:key domain="localhost" key="xxxxx"/>
  	<googlemaps:point id="point1" address="" city="Elkton" state="MD" 
  		zipcode="21921" country="US"/>
	<googlemaps:point id="point1" longitude="-76.67" latitude="39.18"/>
	<googlemaps:traffic id="traffic" point="point1" radius="20" severity="2" type="incident">
		<googlemaps:icon icon="/GoogleMaps/images/accident.png" 
  		    iconWidth="100" iconHeight="35"
  		    anchorX="50" anchorY="35" infoWindowAnchorX="50" infoWindowAnchorY="1"/>
	</googlemaps:traffic>
	<googlemaps:traffic id="construction" point="point1" radius="20" severity="2" 
	    type="construction">
		<googlemaps:icon icon="/GoogleMaps/images/construction.png" 
  		    iconWidth="48" iconHeight="48"
  		    anchorX="24" anchorY="48" infoWindowAnchorX="24" infoWindowAnchorY="1"/>
	</googlemaps:traffic>
	<googlemaps:cluster pathToScript="/GoogleMaps/Clusterer.js" maxVisibleMarkers="5" 
	    markersPerCluster="2" gridSize="5">
		<googlemaps:icon icon="/GoogleMaps/images/g.png" 
		    shadow="/GoogleMaps/images/g_shadow.png"
  		    iconWidth="48" iconHeight="48" shadowWidth="64" shadowHeight="48"
  		    anchorX="24" anchorY="45" infoWindowAnchorX="24" infoWindowAnchorY="1"/>
  	</googlemaps:cluster>
  	<googlemaps:zoomControl enable="true" size="large"/>
</googlemaps:map>
  

It may take some tweaking to get it just right, but you'll soon get the hang of it...

Our next example shows how you can use WMS map servers within Google Maps.