I'm currently using MarkerClustererPlus to cluster my markers. (Any other suggestions wele) And I was wondering if there is a way to cluster by say, continents or countries, instead of by proximity. Thanks

I'm currently using MarkerClustererPlus to cluster my markers. (Any other suggestions wele) And I was wondering if there is a way to cluster by say, continents or countries, instead of by proximity. Thanks

• javascript
• google-maps
• markerclusterer

Share Improve this question Follow asked Oct 8, 2012 at 8:00 Charlotte TanCharlotte Tan 2,55222 gold badges2222 silver badges2525 bronze badges 2

• Where do your markers e from? If they e from a database it should be quite simple to cluster them, (group by), based on any parameters you want on the server side. – Marcelo Commented Oct 8, 2012 at 8:44
• possible duplicate of stackoverflow./questions/12592079/… – geocodezip Commented Oct 8, 2012 at 14:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

try this code for clustering based on region..

var keys = [];
var markerCluster = [];
var markers = new Object();
var map;

function initialize(){
var mapProp = {
  center:center,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);

 //styling cluster image..
  var clusterStyles = [
  {
    opt_textColor: 'black',
    url: 'images/cluster.png',
    height: 56,
    width: 55
  },
  {
     opt_textColor: 'black',
     url: 'images/cluster2.png',
     height: 53,
     width: 52
  }
  ];

  //cluster marker options..
  var mcOptions = {
             // gridSize: 16,
             styles: clusterStyles,
             maxZoom: 15
                 };
 function initialize(){
 var mapProp = {
  center:center,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
 };
  map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);

 //styling cluster image..
  var clusterStyles = [
  {
    opt_textColor: 'black',
    url: 'images/cluster.png',
    height: 56,
    width: 55
  },
  {
     opt_textColor: 'black',
     url: 'images/cluster2.png',
     height: 53,
     width: 52
  }
  ];

  //cluster marker options..
  var mcOptions = {
            // gridSize: 16,
            styles: clusterStyles,
            maxZoom: 15
             };
  //fetching lat long from data base
  <?php echo "addmarker(lat,lng); ?>"
  for(var k in markers) keys.push(k);
            for(var i = 0; i < keys.length; i++)
            {
                markerCluster[i] = new MarkerClusterer(map,      markers[keys[i]],mcOptions);
            }
 }
 function addmarker(lat, lng)
 {
     var provnce;
     var mycenter = new google.maps.LatLng(lat,lng);
     var marker = new google.maps.Marker({
        position:mycenter,
        title:infoName,
        id: count++
        // animation:google.maps.Animation.BOUNCE
        });
    //clustering markers based on region..
    $.ajax({ url:'https://maps.googleapis./maps/api/geocode/json?  latlng='+lat+','+lng+'&sensor=true',
         async: false,
         success: function(data){
                        // console.log(data.results[0]);
                        // return;
             for (var i=0; i<data.results[0].address_ponents.length; i++)
             {
                 if (data.results[0].address_ponents[i].types[0] == "administrative_area_level_1") {
                         //this is the object for province
                         provnce = data.results[0].address_ponents[i]['long_name'];
                     }
             }
             provnce = provnce.split(" ",1);
             if(markers.hasOwnProperty(provnce))
             {
               markers[provnce].push(marker);
             }
             else
             {
               markers[provnce] = new Array();
               markers[provnce].push(marker);
             }
             // console.log(markers);
             }
         });
 }