Google Map setDirections(response) not showing path

Yogendra Sahu

I am implementing google map in Angular 5 using npm library googlemaps.

When trying to show route/path between 2 points using setDirections(),I am unable to see the path.The 2 points are shown but no route is drawn and there is even no error in console.

Following is the code use for showing route:

var mapProp = {
center: new google.maps.LatLng(22.0824, 82.1411),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.directionsDisplay.setMap(this.map);
this.marker1 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0717, lng: 82.1497 }
});
this.marker2 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0942, lng: 82.1257 }
});
google.maps.event.addListener(this.marker1, 'position_changed', this.update);
google.maps.event.addListener(this.marker2, 'position_changed', this.update);
this.lat1 = 22.0717;
this.lang1 = 82.1497;
this.lat2 = 22.0942;
this.lang2 = 82.1257;
this.Source = new google.maps.LatLng(this.lat1, this.lang1);
this.Destination = new google.maps.LatLng(this.lat2, this.lang2);
var request = {
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING
}
this.directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer().setDirections(response);
} else
{
window.alert('Directions request failed due to ' + status);
}
});
}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Yogendra Sahu8y ago
This is the only code the show path between two points

var mapProp = {
center: new google.maps.LatLng(22.0824, 82.1411),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.directionsDisplay.setMap(this.map);
this.lat1 = 22.0717;
this.lang1 = 82.1497;
this.lat2 = 22.0942;
this.lang2 = 82.1257;
this.Source = new google.maps.LatLng(this.lat1, this.lang1);
this.Destination = new google.maps.LatLng(this.lat2, this.lang2);
this.calculateAndDisplayRoute(this.directionsService, this.directionsDisplay);
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
0
Yogendra Sahu8y ago
var mapProp = {
center: new google.maps.LatLng(22.0824, 82.1411),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.directionsDisplay.setMap(this.map);

this.marker1 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0717, lng: 82.1497 }
});

this.marker2 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0942, lng: 82.1257 }
});

google.maps.event.addListener(this.marker1, 'position_changed', this.update);
google.maps.event.addListener(this.marker2, 'position_changed', this.update);

this.lat1 = 22.0717;
this.lang1 = 82.1497;
this.lat2 = 22.0942;
this.lang2 = 82.1257;
this.Source = new google.maps.LatLng(this.lat1, this.lang1);
this.Destination = new google.maps.LatLng(this.lat2, this.lang2);

this.calculateAndDisplayRoute(this.directionsService, this.directionsDisplay);

var request = {
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING
}

this.directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer().setDirections(response);
} else
{
window.alert('Directions request failed due to ' + status);
}
});
}
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
+1