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);
- }
- });
- }