How To Enable/Disable MarkerCluster On Google Maps By Checkbox Event?

How To Enable/Disable MarkerCluster On Google Maps By Checkbox Event?
Google Map
Devidas Labade
Posted by on April 15, 2015 in Blog

How To Enable/Disable MarkerCluster On Google Maps By Checkbox Event?

Having started work on Google maps recently the first challenge that I have encountered is to how to Enable/Disable marker cluster 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 causes both visual overload and sluggish interaction with the map. To overcome this poor performance, the information displayed on the map needs to be simplified.

To overcome this problem I implemented “MarkerCluster” on Google Maps API.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 that you wish to cluster and adding each one into the closest cluster. if it is within in 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 Marker Cluster.

The idea is pretty simple for each zoom level, decide what markers we want 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 how to Enable/Disable Markercluster 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 Markercluser 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();

}