Google map marker clustering using google map API and javascript

Lets start our tutorial, We are going to learn simple way to implement the custom marker clustering in google map API. Already we had discussion about to presenting markers into google map.

It helps a lot for map based listing services both web as well as mobile and also visitors to identify the how many listing(marker) in the sample location. see the demo.

Google map API supports lot of utility libraries for presenting the map and markers like info-box, info-box bubble and more.

Reference and examples:

When comes to the implementation, I have an json data which is having list of location details (latitude and longitude).


I wants to place the markers in map. How to do that? Simply include map API url and initialize the map while body on load



Here is the simple javascript code to load and place the marker

When comes to the marker clustering, we should include the utility library. Here i have give sample code


Marker cluster library url :


We create MarkerClusterer instance and add the marker object into MarkerClusterer. Example

How to add custom cluster icon. It’s simple to add by using style option. Here is the default cluster styles

You change this whatever you need. I hope it quite useful for beginner those who are working in google map API. Don’t forget to share and subscribe for my updates.
Demo and Download