CODEWITHSUNDEEP
angularionic-frameworkheremaps
Kishan Oza
Kishan Oza

Reputation: 1735

CORS issue in HERE map Ionic

Hi I am trying to use HERE map in my ionic application .. I followed this blog https://developer.here.com/blog/display-an-interactive-here-map-in-an-ionic-framework-application

I have created HERE account and get javascrio APPID and APIKEY from there and used in my code just like this ..

home.page.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
declare var H: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild("map", {static: false})
    public mapElement: ElementRef;

    public constructor() { }

    public ngOnInit() { }

    public ngAfterViewInit() {
        let platform = new H.service.Platform({
            "app_id": 'XXXXXXX',
            "app_code": 'XXXXXXX' 
        });
        let defaultLayers = platform.createDefaultLayers();
        let map = new H.Map(
            this.mapElement.nativeElement,
            defaultLayers.normal.map,
            {
                zoom: 10,
                center: { lat: '22.258651999999998', lng: '71.1923805' }
            }
        );
        let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    }

}

My home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <div #map style="width: 100%; height: 100%"></div>

  </div>
</ion-content>

But I am getting there error when I run the project on browser..

enter image description here

Upvotes: 0

Views: 586

Answers (1)

Tomas
Tomas

Reputation: 1887

The blog post you shared uses older version of HERE Javascript API (3.0). Can you try with latest version 3.1?

Just replace https://js.api.here.com/v3/3.0/.. with https://js.api.here.com/v3/3.1/..

Also with 3.1 version you should use apikey instead of app_id, app_code and also defaultLayers structure changed a bit:

let platform = new H.service.Platform({
    apikey: 'XXXXXXX'
});
let defaultLayers = platform.createDefaultLayers();
let map = new H.Map(
    this.mapElement.nativeElement,
    defaultLayers.vector.normal.map,
    {
        zoom: 10,
        center: { lat: '22.258651999999998', lng: '71.1923805' }
    }
);

Here you can find live examples for HERE maps for JavaScript API.

Upvotes: 1

Related Questions