in google maps source to destination is notwrking my code isPreformatted text
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation’;
declare var google;
var distance;
var ttime;
declare var lat;
declare var lng;
var map;
/**
- Generated class for the GetfarePage page.
- See https://ionicframework.com/docs/components/#navigation for more info on
- Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: ‘page-getfare’,
templateUrl: ‘getfare.html’,
})
export class GetfarePage {
Destination: any = ‘’;
MyLocation: any;
map: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation: Geolocation) {
}
ionViewDidLoad() {
this.initializeMap();
}
initializeMap() {
let locationOptions = {timeout: 10000, enableHighAccuracy: true};
this.geolocation.getCurrentPosition(locationOptions).then((position) => {
let options = {
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* Show our lcoation */
this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
/* We can show our location only if map was previously initialized */
this.showMyLocation();
}).catch((error) => {
console.log('Error getting location', error);
});
}
/*
* This function will create and show a marker representing your location
*/
showMyLocation(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let markerInfo = "<h4>You are here!</h4>";
let infoModal = new google.maps.InfoWindow({
content: markerInfo
});
google.maps.event.addListener(marker, 'click', () => {
infoModal.open(this.map, marker);
});
}
calculateAndDisplayRoute() {
let that = this;
let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;
var destination_input = document.getElementById('cdest');
const map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
that.MyLocation = new google.maps.LatLng(pos);
}, function() {
});
} else {
// Browser doesn't support Geolocation
}
directionsService.route({
origin: this.MyLocation,
destination: this.Destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
var route = response.routes[0].legs[0];
distance = (route.distance.value * 0.000621371192).toPrecision(4);
ttime = ((route.duration.value) / 60);
var cost_per_mile = 2.47;
var fdrop = 25.00;
var min_mile = 10;
if(distance <= min_mile){
var ifare = fdrop;
} else {
var ifare = (((distance - min_mile) * cost_per_mile) + fdrop);
}
document.getElementById('dfare').innerHTML = '$' + ifare.toFixed(2) + '<br>' + parseFloat(distance).toFixed(2) +' Miles<BR>Estimated Time : ' + parseFloat(ttime).toFixed(2) + ' Mins ';
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}