How to integrate Map Kit JavaScript API

Published in

Huawei Developers

2 min readJun 26, 2020

Hi everyone,

Currently Map Kit has various SDKs and APIs. In this post we will cover JavaScript API specifically which is a solution for web applications and cross platforms.

What does Map Kit JavaScript API provide?

It provides the basic map display, map interaction, route planning, place search, geocoding, and other functions to meet requirements of most developers.

Which browsers are supported?

Currently, JavaScript APIs support the following browsers:

What are the prerequisites to use Map Kit JavaScript API?

Before using the service, you need to apply for an API key on the HUAWEI Developer website. For details, please refer to “Creating an API Key” under Creating a Credential.

How to integrate basic capabilities?

First thing is copying API Key from the developer console:

AppGallery Connect > Your App > Develop > Overview > App Information > API key

We need to provide the HUAWEI Map Kit API file. The API key must be encoded. You can encode it programatically or you can try out online tools to do it manually.

Create map element in the body:

Initialize the map. The following sample code is to create a map with Paris as the center and a zoom level of 8:

Add a marker:

Show information window when clicking on marker:

Learn More

You can find more information about JavaScript API of Map Kit from the official documentation: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/hms-map-js-about-the-service

Sample code is available on my GitHub page: https://github.com/onurkenis/ionic-hms-map-demo