I have successfully integrated a Google maps in Ionic 2 application. When i load the map on the device and click on get direction it is taking only the current location. When i click on the button for the second time map is loading without any error. Please find me a suitable solution for this problem.
Code
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation'
declare var google;
@Component({
selector: 'page-routemap',
templateUrl: 'routemap.html'
})
export class RoutemapPage {
Destination: any = '';
MyLocation: any;
constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation ) {
}
calculateAndDisplayRoute() {
let that = this;
let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;
const map = new google.maps.Map(document.getElementById('map'))
{
//zoom: 7,
//center: {lat: 41.85, lng: -87.65}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
directionsDisplay.setMap(map);
map.setCenter(pos);
that.MyLocation = new google.maps.LatLng(pos);
}, function() {
});
} else {
}
}
directionsService.route({
origin: this.MyLocation,
destination: this.Destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}