How To Enable/Disable Marker Cluster on Google Maps by Checkbox Event?

Having started work on Google maps recently, the first challenge that I have encountered is how to Enable/Disable marker clusters on Google Map by check box event.

Some applications are required to display a large number of locations or markers. Plotting thousands of markers on Google maps can quickly lead to a degraded user experience. Too many markers on the Google map cause both visual overload and sluggish interaction with the map. The information displayed on the map needs to be simplified to overcome this poor performance.

To overcome this problem, I implemented a “Marker Cluster” on Google Maps API. The grid-based cluster works by dividing the map into squares of a certain size (the size changes at each zoom level) and then grouping the markers into each grid square.

For each marker, you look at each cluster to see how far it is from the center of the cluster. If the distance is less than a maximum (user-specified) distance and the cluster is the closest, then that marker is added to the cluster. If the marker fails to get added to any cluster, then a new cluster is created containing that marker.

The “Marker Cluster” is a client-side utility library that applies grid-based clustering to a collection of markers. It works by iterating through the markers in the collection you wish to cluster and adding each into the closest cluster if within a minimum square pixel bounds.

Each cluster that has more than one marker shows a count of the number of markers inside the cluster. Otherwise, a single marker is shown at each zoom level. The “Marker Cluster” performs the same clustering algorithm.

We can zoom out, and it will show less clusters, but the number of markers within each cluster increases. It is customization as well, we can modify the grid size, the cluster icon, and cluster text in the Marker Cluster.

The idea is pretty simple for each zoom level: decide what markers to show. We can manage how many markers we want visible at different zoom levels. We need more customization of what and where it displays.

The following code shows how to Enable/Disable Marker cluster on Google Map by Checkbox event.

<script src=”js/markerclusterer.js” type=”text/javascript”></script> 

var markerscellSite = [];

var markerCluster=null;

if(element.checked==true) //Enable MarkerCluster by checkbox event

{

mcOptions = {styles: [{

height: 53,

url:”http://google-maps-utility-library- v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png”,

width: 53

}]}

var latValuesCell = [19.089,19.3824,18.9569,18.8309];

var lonValuesCell =[74.74274,74.65209,75.1856,74.3843];

for (var i = 0; i < lacValuesCell.length; i++) {

var pinImage=”;

pinColor=’C6FF00′;

var pinImage = new google.maps.MarkerImage(“http://chart.apis.google.com/chart? chst=d_map_pin_letter&chld=%E2%80%A2|” + pinColor,

new google.maps.Size(21, 34),

new google.maps.Point(0,0),

new google.maps.Point(10, 34));

var latLng = new google.maps.LatLng(latValuesCell[i],lonValuesCell[i]);

var marker1 = new google.maps.Marker({

position: latLng,

icon: pinImage

});

markerscellSite.push(marker1);

google.maps.event.addListener(marker1, ‘click’, function() {

var latMap=this.getPosition().lat().toString();

var longMap=this.getPosition().lng().toString();

});

}

markerCluster = new MarkerClusterer(map, markerscellSite,mcOptions);

}

else{ //disable Markercluser by checkbox is false

for(var i=0;i<markerscellSite.length;i++){

markerscellSite[i].setMap(null);

}

markerscellSite=[];

markerCluster.clearMarkers();

}