We recently built a mobile app for a client who needed their users to be able to select a beach from a list. There are a large number of beaches to choose from across the country, so naturally our minds went straight to a map, with markers representing these locations.
We had a large list of locations so performance was a concern. We wanted our map to be responsive and easy to use.
As you can see, adding so many markers amounts to a noticeable amount of “jank”. Not the premium experience we were looking for.
The solution to this “jank” is to have less markers on your map. But how do you have less markers and still represent the same data? By using clusters.
Thankfully, we don’t have to spend the agonising hours calculating when to cluster, creating all the those markers and handling the cluster clicks. Google has written a set of utility classes to help.
You will need to create a class which represents your location. It will implement ClusterItem and provide the information you might expect. Namely latitude, longitude, title and snippet. This is also where you will need to add your selected boolean.
We gave our ClusterItem a property of a Beach, meaning we can access it later.
Next, we create a ClusterManager and connect it up with our GoogleMap, within our Activity or Fragment.
We want our markers to have a slightly different appearance depending on whether they are selected or not. We also want to tweak the color of the clusters. To achieve this we supply a cluster renderer.
We added a method onClusterItemChange to help us to tweak the marker upon user click. We then set it on our ClusterManager we created above.
For our map we want our items to be selectable upon click. We would also like our map to zoom in when you click on a cluster.
We keep a reference to the last selected marker using the LastSelectedBeachMarker property. This means we know which maker is currently selected.
Lastly, we add our items to the map.
markers being a list of the ClusterItem’s we defined earlier.
Initially, this can be a daunting task to take on. But thanks to the Google maps utility library, creating a clustering map isn’t too time consuming. You get great performance and a customisable look and feel.
Search over 200 blog posts from our team
Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!