Marker clusters on Google Map with two data sources

Clustering markers on GoogleMap is a very useful think in case of thousands of markers displayed. It makes the map look nice and fancy, instead of marker mess. In my previous post I told how to use MarkerClusterer library.

Today I want to add some advanced techniq how to use different styles, in case there are several datasources available.

This functionality is supported ouf of the box and is very easy to use. When creating new MarkerClustered pass styles parameter to it.

var markerCluster = new MarkerClusterer(map, marker_list, {styles:[{...},{...},,,]});

It's array of maps with attributes:

height Number Image height.
width Number Image width.
opt_anchor Array of Number Anchor for label text, like [24, 12]. If not set, the text will align center and middle.
opt_text Color String Text color. The default value is "black".
url String Image url.

## Two datasources example One cluster set uses standard images and another uses custom styles.

# Full code

document.write('<div id="gmap" style="width:500px; height:500px;"></div>');
// Get center
var map_center = new google.maps.LatLng(0.1700235000, 20.7319823000);

// Load google map
var map = new google.maps.Map(document.getElementById("gmap"), {
    zoom:1,
    center:map_center,
    mapTypeId:google.maps.MapTypeId.HYBRID,
    panControl:false,
    streetViewControl:false,
    mapTypeControl:false
});

var pos;
var marker;
var marker_list1 = [];
var marker_list2 = [];
for (var i = 0; i < 200; i++) {
    pos = new google.maps.LatLng(Math.floor(Math.random() * 50), Math.floor(Math.random() * 100));

    if (Math.random()<0.5) {
        marker = new google.maps.Marker({
            position:pos,
            map:map,
            title:'Title',
            icon:'/other/gmap/marker.gif'
        });
        marker_list1.push(marker);
    } else {
        marker = new google.maps.Marker({
            position:pos,
            map:map,
            title:'Title',
            icon:'/other/gmap/images/people.png'
        });
        marker_list2.push(marker);
    }
}

// Add marker clustering with default styles
var markerCluster1 = new MarkerClusterer(map, marker_list1);

// Custom styles
var markerCluster2 = new MarkerClusterer(map, marker_list2, {
    styles:[
	{
    	    url: '/other/gmap/images/people35.png',
    	    height: 35,
    	    width: 35,
	    opt_anchor: [16, 0],
    	    opt_textColor: '#FF00FF'
	},
	{
	    url: '/other/gmap/images/people45.png',
	    height: 45,
	    width: 45,
	    opt_anchor: [24, 0],
	    opt_textColor: '#FF0000'
	},
	{
	    url: '/pther/gmap/images/people55.png',
	    height: 55,
	    width: 55,
	    opt_anchor: [32, 0]
	}
    ]
});

Do not forget to include scripts:

# Links

Full code

Links