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.

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

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

 

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.