Is there possible for working with here map in ionic app?
How can i implement the here map with ionic app
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 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,
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">
<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,
2 Likes
Thanks for your fastest response @addwebsolution, I followed the above but blank screen only appear Map will not be loaded
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.
