Customize Map Marker Information Window with Huawei — HMS Map Kit

Hi everyone,

At this tutorial, I will guide you how to customize marker information window on map using HMS Map Kit.

To integrate HMS Map Kit, please follow this instruction or you can check this tutorial.

After initializing map, we need to create custom view for information window. Let’s save this layout as custom_info_window.

<?xml version="1.0" encoding="utf-8"?>
 <androidx.cardview.widget.CardView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:card_view="http://schemas.android.com/apk/res-auto"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     card_view:cardCornerRadius="10dp"
     card_view:cardElevation="10dp"
     card_view:cardBackgroundColor="@color/grey_87">
 
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:padding="10dp">
 
         <TextView
             android:id="@+id/infoTile"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:ellipsize="end"
             android:singleLine="true"
             android:textColor="@android:color/black"
             android:textSize="16sp"
             android:textStyle="bold"
             android:gravity="center_vertical"/>
 
         <TextView
             android:id="@+id/infoAddress"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="@android:color/black"
             android:textSize="14sp"
             android:gravity="center_vertical"/>
 
         <TextView
             android:id="@+id/infoGetDirections"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="@color/cardinal"
             android:textSize="14sp"
             android:text="@string/get_direction"
             android:drawableEnd="@drawable/ic_directions_cardinal_24dp"
             android:drawablePadding="10dp"
             android:gravity="center_vertical"/>
 
     </LinearLayout>
 
 </androidx.cardview.widget.CardView>

Second step, we need to create data class to show marker information. InfoWindowData

data class InfoWindowData(val siteId: String,
                          val siteName: String,
                          val siteAddress: String,
                          val siteLat: Double,
                          val siteLng: Double)

Next step, we need an adapter to integrate information view. So, let’s create CustomInfoWindowAdapter that is implemented from HMS Map Kit InfoWindowAdapter. At getInfoWindow method, first, we need to inflate the layout we created above. Than, need to get data information from marker tag( I will explain below how to add data information to the marker)

internal class CustomInfoWindowAdapter(val context: Context) : InfoWindowAdapter {
 
     override fun getInfoWindow(marker: Marker?): View {
 
         val mInfoView = (context as Activity).
            layoutInflater.inflate(R.layout.custom_info_window, null)
         val mInfoWindow: InfoWindowData? = marker?.tag as InfoWindowData?
 
         mInfoView.infoTile.text = mInfoWindow?.siteName
         mInfoView.infoAddress.text = mInfoWindow?.siteAddress
 
         return mInfoView
     }
 
     override fun getInfoContents(marker: Marker): View? {
         return null
     }
 }

At final part, we need to add marker and information window to the map. Let’s set InfoWindowData object.

val info = InfoWindowData(site.siteId,
     site.name,
     site.formatAddress,
     site.location.lat,
     site.location.lng
 )

As a note, in this tutorial, I got site information from HMS Site Kit, you can check Site Kit Tutorial from here.

public class Site {
     private String siteId;
     private String name;
     private String formatAddress;
     private AddressDetail address;
     private Coordinate location;
     private CoordinateBounds viewport;
     private double distance;
     private Poi poi;
}

After set the information, we need to set up MarkerOptions. For more marker options, please check.

val options = MarkerOptions()
 options.position(LatLng(site.location.lat, site.location.lng))
 options.title(site.name)
 options.draggable(false)
 options.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_movie_filter_red_900_24dp))
 options.clusterable(false)

Next, we need to set and add adapter that we created above on map.

val customInfoWindow = context?.let { ctx -> CustomInfoWindowAdapter(ctx) }
 hMap.setInfoWindowAdapter(customInfoWindow)
val marker = hMap.addMarker(options)
 marker.tag = info

You can see all methods at below for final part.

override fun onMapReady(map: HuaweiMap) {
     hMap = map
     hMap.setOnMarkerClickListener { marker ->
         val isInfoWindowShown: Boolean = marker.isInfoWindowShown
         when {
             isInfoWindowShown -> {
                 marker.hideInfoWindow()
             }
             else -> {
                 marker.showInfoWindow()
             }
         }
         true
     }
     setMarkersToMap(placeList)
 }
private fun setMarkersToMap(placeList : List<Site>){
     placeList.forEach { it->
         val latlng = LatLng(it.location.lat, it.location.lng)
         val info = InfoWindowData(it.siteId,
             it.name,
             it.formatAddress,
             it.location.lat,
             it.location.lng 
         )
         val options = MarkerOptions()
         options.position(latlng)
         options.title(it.name)
         options.draggable(false)
  options.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_movie_filter_red_900_24dp))
         options.clusterable(false)
 
         val customInfoWindow = context?.let { ctx -> CustomInfoWindowAdapter(ctx) }
         hMap.setInfoWindowAdapter(customInfoWindow)
         val marker = hMap.addMarker(options)
         marker.tag = info
     }
 }

I hope you found this tutorial helpful and if you have any comments or questions, please let me know in the comments below.