export class MapsComponent implements OnInit {
@ViewChild('googleMap') gmapElement: any;
map: google.maps.Map;
data = "initialised";
ngOnInit() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(this.gmapElement.nativeElement, {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
directionsService.route({
origin: "terrell hills, tx",
destination: "alamo heights, tx",
travelMode: google.maps.TravelMode.DRIVING
}, (response, status) => {
if (String(status) === 'OK') {
directionsDisplay.setDirections(response);
this.data = "I'm modified in directionsService";
/**********************************************************
Here the directions are displaying correctly but `this.data`'s value is not changing. What is the reason?
************************************************************/
} else {
alert('Directions request failed due to ' + status);
}
});
}
}
HTML
<span>{{data}}</span> <!---------The content of this span always displays as `initialised`, even though directions are showing perfectly---------->
The class variable data remains unchanged within the function despite using an arrow function. The value of data continues to be displayed as initialised. Can someone please review the comment in the code and provide a solution?
Appreciate any assistance.