An Ionic sample integrated with HMS Map Kit JavaScript Api.
- Copy your API Key from following section
AppGallery Connect > Your App > Develop > Overview > App Information > API key-
Open src/index.html
-
Modify loadMapScript() function and paste your API Key here
const apiKey = encodeURIComponent("YOUR_API_KEY");
const src = `https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=${apiKey}`;
const mapScript = document.createElement('script');
mapScript.setAttribute('src', src);
document.head.appendChild(mapScript);-
Add your HMS API Key
-
Install dependencies
cd ionic-hms-map-demo
npm install- Run following command and you can visit http://localhost:8100/ in your web browser to see the app in action
ionic serve-
Add your HMS API Key
-
Install dependencies
cd ionic-hms-map-demo
npm install- Build Ionic app with the following command
ionic build- Manually add the Android project.
npx cap add android- Build and run the Ionic App using Android Studio. Once Android Studio launches, you can build/emulate/run your app through the standard Android Studio workflow.
npx cap open androidIf you are having issues, you can follow getting started.
- Provide the HUAWEI Map Kit API file. The key must be transcoded using the URL
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY"></script>- Create map container elements in the body
<div id="map"></div> - Initialize the map. The following sample code is to create a map with Paris as the center and a zoom level of 8:
function initMap() {
const mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 8;
mapOptions.language='ENG';
const map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
} - Adding Marker
const mMarker = new HWMapJsSDK.HWMarker({
map: map,
position: {lat: 48.85, lng: 2.35},
label: 'A',
icon: {
opacity: 0.5
}
}); - Showing Information Window
const infoWindow = new HWMapJsSDK.HWInfoWindow({
map,
position: 10,
content: 'This is a InfoWindow.',
offset: [0, -40],
});
infoWindow.open(mMarker);
mMarker.addListener('click', () => {
infoWindow.open(mMarker);
}); 
You can have more infromation from the official documentation of Huawei Map Kit - JS API and you can integrate it in any JS based project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent