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:

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false” />

<script type=”text/javascript” src=”http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.12/src/markerclusterer_packed.js” />

Links

 

Did you find this post useful? Support the the author ($10)
My Google Profile+

2 comments

  1. “Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is excellent, let alone the content!. Thanks For Your article about Quen Somos ? | grupo de consumo responsable .”

  2. Thanks for the post. You saved my day. I don’t need 2 resources, but data will be divided into 2 arrays conditionally that is easy to do with your example. Thanks

Leave a Reply

Your email address will not be published.