[Huawei Developers] John Wo:
More information like this, you can visit HUAWEI Developer Forum​

Introduction

Online food ordering is process to deliver food from restaurants. In this article will do how to integrate Map kit in food applications. Huawei Map kit offers to work and create custom effects. This kit will work only Huawei device.

In this article, will guide you to show selected hotel locations on Huawei map.

Steps

1. Create App in Android.

2. Configure App in AGC.

3. Integrate the SDK in our new Android project.

4. Integrate the dependencies.

5. Sync project.

Map Module

Map kit covers map info more than 200 countries and it will support many languages. It will support different types of maps like Normal, Hybrid, Satellite, terrain Map.

Use Case

1. Display Map: show buildings, roads, temples etc.

2. Map Interaction: custom interaction with maps, create buttons etc.

3. Draw Map: Location markers, create custom shapes, draw circle etc.

Output

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911065729.49141320059616614659174506351175:50510922064337:2800:0ABB98E125B17B49F6C49071A017939C85A5A9168CCFE1F5906590FA39F2F376.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911065729.49141320059616614659174506351175:50510922064337:2800:0ABB98E125B17B49F6C49071A017939C85A5A9168CCFE1F5906590FA39F2F376.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911070035.27353073796182775842465180455310:50510922064337:2800:B08E483D28300D24B4E73A93D1B1032EA29E9C90801789134954B21380E9F323.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911070035.27353073796182775842465180455310:50510922064337:2800:B08E483D28300D24B4E73A93D1B1032EA29E9C90801789134954B21380E9F323.png[/IMG]

Configuration

1. Login into AppGallery Connect, select FoodApp in My Project list.

2. Enable Map Kit APIs in manage APIs tab.

Choose Project Settings > ManageAPIs

Integration

Create Application in Android Studio.

App level gradle dependencies.

apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'

Gradle dependencies

implementation 'com.huawei.hms:maps:4.0.0.301'

Root level gradle dependencies

maven <strong>{</strong>url <strong>'https://developer.huawei.com/repo/'</strong><strong>}
</strong>classpath <strong>'com.huawei.agconnect:agcp:1.3.1.300'</strong>

Add the below permissions in Android Manifest file

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

<application ...
</manifest>

Map Kit:

1. Create xml layout class define below snippet.

<com.huawei.hms.maps.MapView
android:layout_marginTop="?actionBarSize"
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:cameraZoom="8.5"
map:mapType="normal"
map:uiCompass="true"1)
map:uiZoomControls="true"/>

2. Implement OnMapReadyCallback method in activity/fragment, import onMapReady() method.

Initialize map in onCreate() then Call getMapSync().

Bundle mapViewBundle = null;
if (savedInstanceState != null) {
mapViewBundle = savedInstanceState.getBundle(BUNDLE_KEY);
}
mMapView.onCreate(mapViewBundle);
mMapView.getMapAsync(this);

4. onMapReady() method enable required settings like location button, zoom controls, title gestures, etc.

@Override
public void onMapReady(HuaweiMap huaweiMap) {
hMap = huaweiMap;
hMap.isBuildingsEnabled();

hMap.setMapType(0);
hMap.isTrafficEnabled();
hMap.setMaxZoomPreference(10);
………
}

5. addMarker() using this method we can add markers on map we can define markers position, title, icon etc. We can create custom icons.

MarkerOptions markerOptions = new MarkerOptions()
.position(new LatLng(location.lat, location.lng))
.title(response.name)
.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_hotel));
hMap.addMarker(markerOptions)
.showInfoWindow();

6. animateCamera() using this method we can animate the movement of the camera from the current position to the position which we defined.

CameraPosition build = new CameraPosition.Builder()
.target(new LatLng(location.lat, location.lng))
.zoom(15)
.bearing(90)
.tilt(30)
.build();
CameraUpdate cameraUpdate = CameraUpdateFactory.newCameraPosition(build);
hMap.animateCamera(cameraUpdate);

Result:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911072215.37743829496697327335100734169337:50510922064337:2800:58B0C58DEBDA0AA851254953AA922C9FEDEA6E5D62239182FBA2E5495982BD58.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200911072215.37743829496697327335100734169337:50510922064337:2800:58B0C58DEBDA0AA851254953AA922C9FEDEA6E5D62239182FBA2E5495982BD58.gif[/IMG]

Conclusion

In this Article, I have explained how to integrate the Map on food application, displaying selected hotel on Map.

Reference:

Map Kit :

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/android-sdk-introduction-0000001050158633