Trying to Implement here-map in ionic 6 but it gives `403` error and I couldn't able found any solution

Question

I have been trying to implement here-map in Ionic 6 and angular version 13.0.0 and I got a 403 error so please help me to solve it.

index.html

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

Home.page.ts

import { Component, ElementRef, ViewChild } 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: true }) public mapElement: ElementRef;
  private platform: any;

  lat = 28.610001;
  lng = 77.230003;

  public width: any = '100vw';
  public height: any = '90vh';

  private map: any;

  private _apikey: string = "API_KEY";

  public query: string;

  public address: string = '';
  constructor() { }

  ngOnInit(): void {
    this.platform = new H.service.Platform({
      "apikey": this._apikey,
    });
  }

  ngAfterViewInit() {
    let defaultLayers = this.platform.createDefaultLayers();
    let map = new H.Map(
      this.mapElement.nativeElement,
      defaultLayers.vector.normal.map,
      {
        zoom: 5,
        center: { lat: this.lat, lng: this.lng },
      }
    );
  }
}

Home.page.html

<ion-content [fullscreen]="false">
  <div #map [style.width]="width" [style.height]="height"></div>
</ion-content>