How to integrate Huawei — HMS Map Kit, add a marker and draw a circle

Hi everyone,

In this tutorial, I will guide you on how to integrate HMS Map Kit into the project. And, we will add a marker and draw a circle on the map.

Before the integration, we need to configure app information in AppGallery Connect. Please check these instructions to configure.

After the app configuration, let’s add to the root directory build.gradle

— repositories to configure the Maven repository address for the HMS SDK

— dependencies to add agcp configurations

buildscript {
     repositories {
        maven { url 'https://developer.huawei.com/repo/' }
    }
    dependencies {
        classpath 'com.huawei.agconnect:agcp:1.6.0.300'
    }
}

allprojects {
    repositories {
        maven {url 'https://developer.huawei.com/repo/'}
    }
}

At the app directory build.gradle,

— configure build dependencies.

dependencies {
     implementation 'com.huawei.hms:maps:6.6.0.300'
}

— And apply for plugin

apply plugin: 'com.huawei.agconnect'

Now, HMS Map Kit is ready to go. Before coding, we need to add permissions to the AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Let’s define our layout as follows:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:map="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
     <com.huawei.hms.maps.MapView
         android:id="@+id/mapView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         map:mapType="normal"
         map:uiCompass="true"
         map:uiZoomControls="true"
         map:cameraZoom="8.5"/>
 
 </LinearLayout>

We can save this layout as fragment_map.

Now we can define our fragment. We need to implement OnMapReadyCallback to our fragment and call getMapAsync() to register the map callback.

val MAPVIEW_BUNDLE_KEY = "MapViewBundleKey"
class MapFragment : Fragment(), OnMapReadyCallback{
 
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, 
                                savedInstanceState: Bundle?): View? {
         val root = inflater.inflate(R.layout.fragment_map, container, false)
         mapView = root.findViewById(R.id.mapView)
         var mapViewBundle: Bundle? = null
         if (savedInstanceState != null) {
             mapViewBundle = savedInstanceState.getBundle(MAPVIEW_BUNDLE_KEY)
         }
         mapView.onCreate(mapViewBundle)
         mapView.getMapAsync(this)
 
         return root
     }

Next step, we need to call the onMapReady callback to obtain the HuaweiMap object.

override fun onMapReady(map: HuaweiMap) {
     map.isMyLocationEnabled = true
     map.uiSettings.isMyLocationButtonEnabled = true
     map.uiSettings.isCompassEnabled = true
     map.uiSettings.isRotateGesturesEnabled = true
     map.uiSettings.isScrollGesturesEnabled = true
     map.uiSettings.isScrollGesturesEnabledDuringRotateOrZoom = true
     map.uiSettings.isTiltGesturesEnabled = true
     map.uiSettings.isZoomControlsEnabled = true
     map.uiSettings.isIndoorLevelPickerEnabled = true
     map.uiSettings.isMapToolbarEnabled = true
     map.uiSettings.isZoomGesturesEnabled = false
     map.uiSettings.setAllGesturesEnabled(true)
 
     map.setOnMapLoadedCallback {
         Log.d(Constants().LOG_TAG_MAP, "[Map] Loaded.")
     }
     hMap = map
 }

As you can see, we can change map UI settings as we want. Here, we are ready to display the map.

Add Circle

Now, let’s add the circle to the map. We need to define the circle center point (note* I use my current location latitude and longitude) and circle radius (circle radius must be a meter value). Also, we can define circle strokeWidth and strokeColor as wanted. For more information, please check

private var circle: Circle? = null
 private fun addCircle() {
     circle?.remove()
     circle = hMap
         .addCircle(CircleOptions().center(LatLng(40.9702, 29.0706))
         .radius(2000.0))
     circle?.strokeWidth = 5f
     circle?.strokeColor = Color.RED
 }

Add Marker

Next step, we will add markers to the map. We can define the marker’s position, title, and snippet. Also, we can use custom images to replace default icons or modify marker attributes to change the marker icons like the following.

private fun addMarker(){
     hMap.addMarker(
         MarkerOptions()
             .title("Cinemaximum")
             .snippet("Cinema")
             .position(LatLng(40.9675909, 29.06499))
             .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_movie_filter_red_900_24dp)) 
     )
 }

If you want to customize the marker info view, please check this tutorial.

In this tutorial, I try to explain how we integrate the HMS Map and add a marker and circle. I hope you found this tutorial helpful and if you have any comments or questions, please let me know in the comments below.