Show custom marker icon and clustering the location when zoom out the Google Map

Hi folks,

This is a sub post of Google Map Store locator series. In this post, we’ll see how to show custom marker icon and clustering the location when zoom out the Google Map. Please refer this link if you missed the first part, integrate basic Google Map.

Here is the sample demo. (zoom out to cluster the markers)

Showing custom markers icon on google map.

You may have different kind of store and want to differentiate each stores with different marker icon, then google map provides a flexible way to handle it.

To achieve it, first create the marker icon, then use that icon when creating the google marker.

in the about code,  the odd number stores will get “storeType1.png” as marker icon and even number store will get “storeType2.png” as marker icon.

 

Clustering the location markers when zoom in/out

If your site try to shows 100 location on the map, then the markers will start to overlap on top of another one and the whole map will be messed up. The solution for this problem will be clustering the markers. so if the amount of masker listed on a particular area exceed some limit, then those markers are represented as one marker by mention the number of markers are under that single marker.

To get it done, I have used a JavaScript library called MarkerClusterer.

in order to use this library we have to pass the map and all markers instance with displaying option as follows.

 

Refer the following links for more details;

What can we do with MarkerCluster options.

Customizing Google Maps: Custom Markers

 

You may also like...

1 Response

  1. July 24, 2015

    […] Show custom marker icon and clustering the location when zoom out the Google Map […]

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: