Google maps routes draw line not showing up but a and b origin and destination is shown

Ionic Framework ionic-v3
1

import { Component, ViewChild, NgZone} from ‘@angular/core’;
import { NavController, NavParams, ModalController } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation’;
import {} from ‘@types/googlemaps’;
import { NgForm } from ‘@angular/forms’;
import { MapPage } from ‘…/map/map’;

declare var google;
@Component({
selector: ‘page-booking’,
templateUrl: ‘booking.html’
})
export class BookingPage {
@ViewChild(‘map’) mapElement;
map:any;
markers : Array = [];
fromValue:string;
toValue:string;
totalDistance:string;
public lat: number;
public lng: number;
public zoom: number;
public address: string;

geocoder = new google.maps.Geocoder;
directionsDisplay = new google.maps.DirectionsRenderer;
directionsService = new google.maps.DirectionsService;

constructor(
public navCtrl: NavController,
public navParams: NavParams,
public modalCtrl: ModalController,
private zone: NgZone,
public geolocation: Geolocation
) {}

ionViewDidLoad() {
this.fromValue = ‘Pickup Location’;
this.toValue = ‘Dropoff Location’;
this.loadMap();
}

loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;

  let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  this.directionsDisplay.setMap(this.map);

  let latlng = {lat: position.coords.latitude, lng: position.coords.longitude};
  let marker = new google.maps.Marker({
    position: latlng,
    map: this.map
  });
  this.markers.push(marker);

  google.maps.event.addListenerOnce(this.map, 'idle', () => {
  console.log('Map loaded!');

  console.log(latlng);

  this.geocoder.geocode({'location': latlng}, (results, status) => {
    if (status === 'OK') {
      if (results[1]) {
        this.address = results[1].formatted_address;
        let infoWindow = new google.maps.InfoWindow({
            content: this.address
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(this.map, marker);
        });
      } else {
        console.log('No results found');
      }
    } else {
      console.log('Geocoder failed due to: ' + status);
    }
  });
}, (err) => {
  console.log(err);
});
});

}

setMapOnAll(map) {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(map);
}
}

bookNow(form: NgForm){
this.setMapOnAll(null);
this.calculateAndDisplayRoute(this.directionsService, this.directionsDisplay);
//console.log('From: ’ + form.value.journey_from);
//console.log('To: ’ + form.value.journey_to);
//console.log('Total Distance: ’ + form.value.journeyDistance);
}

openModal(type){
const modal = this.modalCtrl.create(MapPage, {lat: this.lat, lng: this.lng, addr: this.address, type: type});
modal.present();
modal.onDidDismiss(
data => {
if(data){
if(data.type == ‘from’){
this.fromValue = data.selectedaddr;
}else{
this.toValue = data.selectedaddr;
}
}
});
}

calculateAndDisplayRoute(directionsService, directionsDisplay) {
let me = this;
directionsService.route({
origin: this.fromValue,
destination: this.toValue,
//waypoints: [{location: ‘Hotel Muglin, Darechok, Nepal’}],
travelMode: ‘DRIVING’,
avoidTolls: true
}, function(response, status) {
if (status === ‘OK’) {
// For each route, display summary information.
directionsDisplay.setDirections(response);
let route = response.routes[0];
me.zone.run(function () {
for (var i = 0; i < route.legs.length; i++) {
me.totalDistance = route.legs[i].distance.text;
}
});
} else {
//console.log(‘wtf’);
}
});
}
}