Today, in this article, I’ll guide you through how we can show custom info window when a user clicks on a marker or inside the cluster of marker’s using the android-maps-util library. The idea of showing custom info window on a marker is to add more meaning instead of simply showing title.
Here’s the content of what we’re going to learn in this article.
- Show simple text title info on the marker
- Show custom info window view on a marker click
- Add a click listener on the marker custom info window
- Show custom info window marker when working with cluster’s
Note: This assuming you have already set up Google Maps in your Android app. If not, then visit Google Maps API to get started.
Before we start looking at some code, we also need to add the following dependency in our app-level build.gradle file.
Now that we have all the configuration out the way, we can start showing the custom info window on a marker click.
Show simple text Title info on the marker
Once Google Maps are added to your activity or fragment, you can perform any other operations inside the getMapAsync method. Let us see the example of how to show title info on a marker.
The marker title info result is shown below.
Show custom info window View on a marker click
In the above example, we set the default info window screen when a user clicks on a marker. But in order to customize the info window, we need to implement InfoWindowAdapter and set it via setOnInfoWindowAdapter method on a Google Maps instance.
First, let’s create a CustomMarkerInfoWindowView class which implements the InfoWindowAdapter interface.
Going over the above code.
- In the constructor I simply inflate a view from the XML file: This is the layout that we’ll be used to show our custom info window one marker click.
- The getInfoWindow method will be called every time when a user clicks on a marker and provide the custom view for info window. You can check out when to use getInfoWindow and getInfoContents here on this link.
marker.getTagmethod returns the object associated with the specific marker. An object which can contain data about the marker representer. You can set a marker tag with the
marker.setTagmethod after it rendered on Google Maps.
- Returns the info view after setting the text views.
Second, we need to do setInfoWindowAdapter on Google Maps instance.
After setting the info window adapter, it should look like this:
Note: Only one marker info window displayed at a time. If a user clicks on another marker, the current info window will be hidden and a new one will be displayed.
Add a click listener on the marker Custom info window
Now that we’ve successfully shown our custom info window for the marker but how do we know that the user taps the info window view. Actually, there’s a utility method added inside the GoogleMap class and all we need to do is to use the setOnInfoWindowClickListener method.
The onInfoWindowClick method gives the marker instance of the taped item window. And we can get the User object from
To test the above update you need to run the application.
show custom info window marker when working with cluster’s
Showing marker info window when working with the cluster’s is a little different than the previous method. Also, I’m not going to discuss how to create markers of the cluster in this article, because I already did that in my previous article.
To show info window marker inside the cluster you must perform these following things:
The above code does five things.
- To use the marker clustering utility we need to create an instance of ClusterManager.
- Creating a new instance of the renderer after passing the acceptable parameter. (If you’re wondering what is this “MarkerClusterRenderer” thing is, see this earlier post).
- Next, get the MarkerManager instance from ClusterManager and set as info window adapter on GoogleMap.
- Set the CustomMarkerInfoWindowView as an info window adapter on MarkerManager.Collection instance.
- If we did not set the marker listener and pass the ClusterManager instance to setOnMarkerClickListener method then you’ll not able to see the custom info window view on marker click.
If all goes well, you should be able to see the cluster manager and marker info window like this:
I hope you enjoyed this blog on how to show custom info window view on marker’s click when working with the android-maps-utils library. If you have any question, feel free to leave them in the comments section. Also, you can get the complete source code of above example from GitHub.
Thank you for being here and keep reading…