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


#1

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

How can i implement the here map with ionic app

HERE WE GO MAP


#2

Hi, @sabarinathen

Could you try Google Maps native plugin

Hope this will resolve your issue

Thanks,


#3

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


#4

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


#5

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

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --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

  <ion-app></ion-app>
 <script src="https://maps.googleapis.com/maps/api/js"></script>

home.html file

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

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

home.ts file


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

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[[Geolocation]]
})
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")
        });
  }
  ionViewDidLoad(){
   this.loadMap();
 }
  loadMap(){
    this.geolocation.getCurrentPosition().then((position) => {
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log('sadsad',this.latLng);
        let mapOptions = {
          center: this.latLng,
          zoom:18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        console.log('asdasdsad',mapOptions);
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
        this.addMarker();
        });
  }
  addMarker(){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });
    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', () => {
      infoWindow.open(this.map, marker);
    });

  }

}

Hope this will solve your issue

Thanks,


#6

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


#7

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


#8

Hello, @sabarinathen

Your index.html file

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

<head>
    <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
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

    <link href="build/main.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>


</head>

<body>

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

    <!-- 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) {
            map.setCenter({
                lat: 52.5159,
                lng: 13.3777
            });
            map.setZoom(14);
        }

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





        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'), defaultLayers.normal.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...
        addMarkersToMap(map);
    </script>

</body>

</html>
and home.html 

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

Thanks,


#9

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


#10

Hi, @sabarinathen

Check below link :

I think this will resolve your issue

Thanks,


#11

I tried these @addwebsolution but contains an error
My HomePage.ts file:


signature.venue.maps.api.here.com/venues/signature/v1?xnlp=CL_JSMv3.0.16.0&app_id={bhnuudsTFzNp1tBBDlyR}&app_code={L1exhJl2iImxdTtihmVUzQ} Failed to load resource: the server responded with a status of 401 (Unauthorized)
localhost/:1 XMLHttpRequest cannot load http://signature.venue.maps.api.here.com/venues/signature/v1?xnlp=CL_JSMv3.0.16.0&app_id={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.


#12

It didnt work, im getting an error see screenshot