Add HERE we go MAPS to ionic page


#1

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?


#2

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


#3

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 }
      });
  }
}

#4

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


#5

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


#6

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