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.

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();

}

Related Posts

  • Achieving Successful Analytics on Cloud

    Achieving Successful Analytics on Cloud

    Achieving Successful Analytics on Cloud

    As per Precedence Research, the analytics on the cloud [...]

  • Award Winning Hadoop Based IOT Platform Development

    Award Winning Hadoop Based IOT Platform Development

    Award Winning Hadoop Based IOT Platform Development

    In the competitive landscape of the industrial automation sector, [...]

  • Enhancing-Banking-Experience-with-Big-Data

    Enhancing Banking Experience with Big Data

    Enhancing Banking Experience with Big Data

    Traditionally, businesses differentiated their markets based on price, product, or [...]

Emergys Blog

Recent Articles

  • Large Language Models

    Verticalization of Large Language Models (LLMs): Unlocking Specialized Potential with Emergys

    Verticalization of Large Language Models (LLMs): Unlocking Specialized Potential with Emergys

    Large Language models (LLMs) have transformed Natural Language Processing [...]

    Large Language models (LLMs) have transformed Natural Language Processing (NLP); however, their generalist nature can [...]

  • Migrating from Remedyforce to BMC Helix

    Enhance Your IT Service Management: Migrating from Remedyforce to BMC Helix

    Enhance Your IT Service Management: Migrating from Remedyforce to BMC Helix

    In today’s rapidly evolving business landscape, organizations must constantly seek [...]

    In today’s rapidly evolving business landscape, organizations must constantly seek ways to optimize their IT service [...]

  • Service Desk Automation

    Top Candidates for Service Desk Automation

    Top Candidates for Service Desk Automation

    Automation is not new to anyone. It is the foundation [...]

    Automation is not new to anyone. It is the foundation for any enterprise digitization. However, companies [...]