Google Maps for those who don't know is a mapping service developed by Google. It offers satellite imagery, street maps, 360-degree panoramic views of streets, real-time traffic conditions, and route planning when traveling.
In this situation I am using google maps API to show buildings on google maps as per their locations. A Marker is used to plot buildings on google maps. But, when two or more markers are very close to each only then a single marker is displayed on google maps which makes it difficult to identify the number of available markers at the same point. To address this problem, there are two techniques for Markers, Spiderfier and Clustering.
1. Markers Spiderfier
If multiple markers are located close to each other then simply click on any one marker it spiderify and shows all the markers.
2. Clustering of Markers
If multiple markers are located close to each other then it shows the number of markers present on the same location with different colours. By clicking that number it auto zooms on the map so that the marker displays the exact location .
Here are the steps to use for Markers Spiderfier:
Note: The Google Maps API v3 must be included *before* using this
Markers Spiderfier which uses the OverlappingMarkerSpiderfier library. This is available from the provide link http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js
Initialize Map and OverlappingMarkerSpiderfier
A method for adding markers requires a change to this code here because we are using OverlappingMarkerSpiderfier as compared to adding normal markers on the map.
Events on Markers are also changed because now we are not using a simple marker. All events apply as per OverlappingMarkerSpiderfier.
Steps for using Clustering:
Clustering uses markerclusterer library. This is available from the provided link
Initialise markers on the map, then add the markers on the markerArray, which is then used in markerCluster at the time of Initialisation.
Initialising markerCluster with maps and markerArray: Here there is no need to handle events of markerCluster that is automatically handled by the API.
Marker Clustering also handles the zoom level of the markers. If there are a few markers that are present then it auto zooms in, and if there are more markers on the map then it auto zooms out. The API provides a colorful view of clustered markers with a number of markers in the center. Blue coloured markers are used to represent 2-9 markers, golden colour represents 10-99 markers and Red colour represents 100-999 and so on.
The above images are used for clustering of markers with the number of markers as per internal conditions.