I'm currently using MarkerClustererPlus to cluster my markers. (Any other suggestions welcome) And I was wondering if there is a way to cluster by say, continents or countries, instead of by proximity. Thanks
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.com/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_components.length; i++)
{
if (data.results[0].address_components[i].types[0] == "administrative_area_level_1") {
//this is the object for province
provnce = data.results[0].address_components[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);
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With