Wednesday, September 11, 2013

How to cluster markers in google maps

Hello again,

After some thoughts I decided to give you a little bit more info on how you can improve your Google map.
Remember our first post related to google maps on your site? Well let's see how our map looks:

A little bit too many markers, so it is difficult to see how many places you have there. Okay, fine, markers are quite ugly as well, our designer is working on it :-)
But, how can we improve this map? Well it would be nice to join multiple markers sitting in some close range into groups, cluster them. Something like this:
Looks better right? Well at least cleaner.

So how can you implement this?
To start with, you have to implement your Google map as we did in our previous post "Responsive web design - google maps".
Then you need to link to another jquery library "markerclusterer.min.js":
<script type="text/javascript" src="/Scripts/markerclusterer.min.js"></script>
You can download all the necessary libraries from here.
Once this is done, in your Jquery code after map is populated with markers add following line of code:
$('#allbarsmap').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
here "allbarsmap" is the name of the control that contains your map.
And this is it. Crazy!! Right? :-)
Here is the example from Google:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-clustering.html
And here is a MarkerClusterer library:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

The example we reviewed in this post you can check on BestBars.in - our website about best bars, pubs, and cocktail lounges all over the world.

Well sorry if I gave you information you already knew, there is nothing really new here, but just wanted to share with you guys this little piece of functionality to save your some research.

Please feel free to through in any questions, comments, we would love that :-)

Cheers,
Your GPTeam

2 comments:

  1. Its nice.You can check mine too. Its regarding google maptags. Maptags shortens your address to your favourite word and makes sharing address as easy as sharing a word. Visit at mapta.gs/maptags/700110

    ReplyDelete


  2. Great information here. Thank you for sharing. If you are ever in a need of
    locksmith denver
    Services we are Aurora Locksmith Services. You can find us at auroralocksmithco.com.com or call us at: (720) 220-4851.

    ReplyDelete