How to add a marker cluster in Google Maps?

1,382 Views
google-map-with-marker-clustering

Have you ever had to use a map with so many multiple markers on it, that it almost became impossible to select the pin of your interest? If only these pins were nearby, then they could be grouped together so much easier to make the map more user-friendly. This is very much possible and it is known as Clustering.

But how do you get clustering in the app?

Clustering on Google Maps is so very simple because there is an amazing library that helps us at doing this. This is the Google Maps Utils library.

To get this library, all we need to focus on is add it as a dependency in our build.gradle. compile ‘com.google.maps.android:android-maps-utils:0.5’

Once that’s been done, we need then main at its implementation interface called the ClusterItem on our model class. This interface will then provide marker data to our very own model.

Marker clustering allows for the grouping of multiple map markers into a single, composite marker allowing for the visual drill-down into a group of closely positioned markers. Clicking the clusters expands to show the markers in the clusters. The marker clustering utility helps you manage multiple markers at different zoom levels. To be precise, the ‘markers’ are actually ‘items’ at this point, and only become ‘Markers’ when they’re rendered. But for the sake of clarity, this document will name them ‘markers’ throughout.

When a user views the map at a high zoom level, the individual markers show on the map. When the user zooms out, the markers gather together into clusters, to make viewing the map easier. 

Steps to create Marker Clustering

  1. Implement ClusterItem to represent a marker on the map. The cluster item returns the position of the marker as a LatLng object.
  2. Add a new ClusterManager to group the cluster items (markers) based on zoom level.
  3. Set the map’s OnCameraChangeListener() to the ClusterManager, since ClusterManager implements the listener.
  4. If you want to add specific functionality in response to a marker click event, set the map’s OnMarkerClickListener() to the ClusterManager, since ClusterManager implements the listener.
  5. Feed the markers into the ClusterManager.

Showing Cluster Markers

You can enable cluster markers on a map by using a ClusterLayer and adding map markers to it. All markers that are on a layer are automatically clustered based on a grid-based clustering algorithm that depends on the map zoom level.

The following steps demonstrate how to use the ClusterLayer class:

  • Create map markers as normal

MapMarker mm = new MapMarker();

mm.setIcon(myImage);

mm.setCoordinate(new GeoCoordinate(52.53,13.23));

  • Create a ClusterLayer object

ClusterLayer cl = new ClusterLayer();

  • Add markers to the cluster layer instead of the map directly. You can also add a Collection of MapMarker instead of just adding a single marker.

cl.addMarker(mm);

  • Add the cluster layer to the map.

mMap.addClusterLayer(cl);

  • To remove a marker or collection or markers from the cluster layer again call

When a user plans to view the map at a very high zoom level, the individual markers that show on the map actually zooms out and the markers gather together into the formation of clusters, to make viewing the map a whole lot easier. The marker clustering utility is ideally a part of the Maps SDK present for the Android Utility Library. If you haven’t  set up the library already, make sure to follow the setup guide that is present before reading the whole of the page.

To summarize, Here is a complete run through of all the salient steps required:

-Implement the cluster item to represent a whole marker on the map. The cluster item will then return the position of the whole marker as a holistic LatLng object, and an essential or the optional title or the snippet of the same.

-Add a new Cluster Manager to be part of the group in the set of cluster items based on the actual zoom level.

-Set the map’s On Camera to be set to IdleListener on part of the ClusterManager, since it is the ClusterManager which helps to implement the same to the listener.

-If you want to go on to add specific functionality in part of the response to a marker then go ahead and click event, set the map’s OnMarkerClickListener() on the page to the Cluster Manager, and so since ClusterManager ideally worked to implement the same to the listener.

-Feed the markers that are present into the ClusterManager that is available on the map. 

Here is everything you need to know when using marker clustering for including google maps.

1,382 Views

Categories

Archives

Tags