Is there any way to use HERE WE GO MAP in ionic app?

Is there possible for working with here map in ionic app?

How can i implement the here map with ionic app


Hi, @sabarinathen

Could you try Google Maps native plugin

Hope this will resolve your issue


Yeah i tried to working in googlemaps but i need is there any one tried to implement with here map…How can we implement?

Are there Cordova plugins for Here?
Are there JS libraries for Here?

Hello, @sabarinathen
Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

$ npm install --save @ionic-native/google-maps

index.html file

 <script src=""></script>

home.html file

  <ion-navbar color="primary">
      Google Map
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>

<ion-content >
  <div #map id="map"></div>

home.ts file

import { Component,ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;

  selector: 'page-home',
  templateUrl: 'home.html',
export class HomePage {

    public lat:any;
    public lng:any;
    public latLng :any=[];

    @ViewChild('map') mapElement: ElementRef;
     map: any;

  constructor(public navCtrl: NavController,private  geolocation: Geolocation) {
    let watch = this.geolocation.watchPosition();
      watch.subscribe((position) => {
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log("change position")
    this.geolocation.getCurrentPosition().then((position) => {
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        let mapOptions = {
          center: this.latLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        console.log('asdasdsad',mapOptions); = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    let marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
    let content = "<h4>Addweb Solution</h4>";
    this.addInfoWindow(marker, content);
  addInfoWindow(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    google.maps.event.addListener(marker, 'click', () => {, marker);



Hope this will solve your issue


1 Like

thanks @addwebsolution

My question is if i want to migrate google map to HERE WE GO MAP for developement how to implement the app with here map

(Most people here don’t seem to know what HERE WE GO MAP actually is. A link to a website might help…)

Hello, @sabarinathen

Your index.html file

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <meta charset="UTF-8">
    <title>Ionic App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#4e8ef7">

    <!-- cordova.js required for cordova apps -->
    <script src="cordova.js"></script>

    <!-- un-comment this code to enable service worker
    if ('serviceWorker' in navigator) {
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));

    <link href="build/main.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>



    <!-- Ionic's root component and where the app will load -->

    <!-- The polyfills js is generated during the build process -->
    <script src="build/polyfills.js"></script>

    <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
    <script src="build/vendor.js"></script>

    <!-- The main bundle js is generated during the build process -->
    <script src="build/main.js"></script>

    <script type="text/javascript" charset="UTF-8">
         * Moves the map to display over Berlin
         * @param  {H.Map} map      A HERE Map instance within the application
        function moveMapToBerlin(map) {
                lat: 52.5159,
                lng: 13.3777

        function addMarkersToMap(map) {
            var parisMarker = new{
                lat: 48.8567,
                lng: 2.3508
            var romeMarker = new{
                lat: 41.9,
                lng: 12.5
            var berlinMarker = new{
                lat: 52.5166,
                lng: 13.3833
            var madridMarker = new{
                lat: 40.4,
                lng: -3.6833
            var londonMarker = new{
                lat: 51.5008,
                lng: -0.1224

        var platform = new H.service.Platform({
            app_id: 'DemoAppId01082013GAL',
            app_code: 'AJKnXv84fjrb0KIHawS0Tg',
            useCIT: true,
            useHTTPS: true
        var defaultLayers = platform.createDefaultLayers(); //Step 2: initialize a map - this map is centeredover Europe
        var map = new H.Map(document.getElementById('map'),, {
            center: {
                lat: 50,
                lng: 5
            zoom: 4
        //Step 3: make the map interactive 
        // MapEvents enables the event system 
        // Behavior implements default interactionsfor pan / zoom(also on mobile touch environments) 
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
        // Create the default UI components var ui = H.ui.UI.createDefault(map, defaultLayers); // Now use the map as required...


and home.html 

 <div id="map" style="width: 100%; height: 400px; background: grey"></div>



Thanks for your fastest response @addwebsolution, I followed the above but blank screen only appear Map will not be loaded

Hi, @sabarinathen

Check below link :

I think this will resolve your issue


I tried these @addwebsolution but contains an error
My HomePage.ts file:{bhnuudsTFzNp1tBBDlyR}&app_code={L1exhJl2iImxdTtihmVUzQ} Failed to load resource: the server responded with a status of 401 (Unauthorized)
localhost/:1 XMLHttpRequest cannot load{bhnuudsTFzNp1tBBDlyR}&app_code={L1exhJl2iImxdTtihmVUzQ}. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. The response had HTTP status code 401.

It didnt work, im getting an error see screenshot