Add HERE we go MAPS to ionic page

I do not want to use the Ionic Native Google Maps, because now I have to pay a lot, instead I want to use HERE we go maps but I follow the documentation of HERE we go maps, does any body knows how to add HERE we go maps?

Ionic Native Google Maps uses native Google Maps SDKs on Android and iOS, which are still free.

I just gave it a try and this works.

Index.html (in head):

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>

Page.html:

<ion-content>
<div style="width: 640px; height: 480px" id="mapContainer"</div>
</ion-content>

Page.ts:

import { Component, OnInit } from '@angular/core';

declare const H;

@Component({
  selector: 'app-here-map',
  templateUrl: './here-map.page.html',
  styleUrls: ['./here-map.page.scss'],
})

export class HereMapPage implements OnInit {
  herePlatform;

  constructor() {
    this.herePlatform = new H.service.Platform({
      'app_id': 'your_app_id',
      'app_code': 'your_app_code'
    });
  }

  ngOnInit() {
    const defaultLayers = this.herePlatform.createDefaultLayers();
    const map = new H.Map(
      document.getElementById('mapContainer'),
      defaultLayers.normal.map,
      {
        zoom: 10,
        center: { lat: 52.5, lng: 13.4 }
      });
  }
}
1 Like

It is free, but Ithe plan is to receive more than 100,000 requests per day soy that would be to much money.

Thank you, It works no to perfectly but it works, from now we can continue with our development with HERE maps.

I found it pretty good.
The map is static unless you add MapEvents.