Angular / google map not drawing polyline between path points

Question

Im very new to angular, the issue is my I unable to get agm-polyline to draw the path on my map. My data is populating my Array of objects but no action is being performed after that. Thank you in advance for your help.

<agm-map [latitude]="lat" [fitBounds]="bounds" [longitude]="lng" [zoom]="defaultZoom">
 <agm-polygon >
    <ng-container>
        <agm-polyline *ngFor="let polyline of polylines;let i = index;"  [strokeColor]="polyline.color" [visible]="true" [zIndex]="1">
           <agm-polyline-point *ngFor="let pint of polylines.path" [latitude]="pint.lat" [longitude]="pint.lng">
           </agm-polyline-point>
       </agm-polyline>
    </ng-container>
    </agm-polygon>
   <sebm-google-map-directions [origin]="origin" [destination]="destination" [travelMode]="travelMode"></sebm-google-map-directions>
  </agm-map>

 this.polylines = this.calculateAndDisplayRoute(directionsService, directionsDisplay,this.waypoints,this.firststopRec,this.laststopRec);


   private calculateAndDisplayRoute(directionsService, directionsDisplay,waypoints,firststopRec,laststopRec){
    var waypnts = [];
    var pts = [];
    this.maxSpeed = 40;
 var getpnts = this.waypoints.map(function(item){
  pts.push({
    latlng: new google.maps.LatLng(parseFloat(item.latitude),parseFloat(item.longitude))
  });
  return pts ;
});
let pnts = pts;
console.log("pnts: "+ JSON.stringify(pnts));
var newPnts = [];
for (let pnts of pts) {
  newPnts.push(pnts.latlng);
}

   var frtLatlng = new google.maps.LatLng(parseFloat(firststopRec.latitude),parseFloat(firststopRec.longitude));
   var lstLatlng = new google.maps.LatLng(parseFloat(laststopRec.latitude),parseFloat(laststopRec.longitude));
    var request = {
      origin: frtLatlng,
      destination: lstLatlng,
      waypoints: waypnts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
    };
   // console.log("request: {request}: "+ JSON.stringify(request));
    directionsService.route(request, function(response, status) 
    {
      if (status == google.maps.DirectionsStatus.OK) 
      {
        directionsDisplay.setDirections(response);
        //var route = response.routes[0];
        var routewypt = response.routes[0].legs;

        let polylines = [];
        let i = 0;
        let newPolyline = {path: [], color: 'red', strokeWeight: 3};

        for (let point of newPnts) {
          newPolyline.path.push(point);

            newPolyline.path.push( point[i+1] );
            polylines.push(newPolyline);
            newPolyline = {path: [], color: 'red', strokeWeight: 3};
          i++;
        }
        let pint = polylines;
        console.log('pint: ' + JSON.stringify(pint));
        console.log('polylines: ' + JSON.stringify(polylines));
       return polylines;

      }
    }); 
  }

My Data is there but the polyline path isnt drawing on the map

[{"path":[{"lat":39.1876259,"lng":-96.58321000000001},null],"color":"red","strokeWeight":3},....]

Answer 1

The change is not being detected as it is happening outside of the angular framework within the asyncronous google directions callback. Make sure you include the change detector in the constructor, and only call change detection after the value has been assigned. Use a lambda to maintain the scope in the google directions callback.

Force Change Detection

constructor(private ref: ChangeDetectorRef){}

...

this.calculateAndDisplayRoute(directionsService, directionsDisplay, this.waypoints, this.firststopRec, this.laststopRec);


private calculateAndDisplayRoute(directionsService, directionsDisplay, waypoints, firststopRec, laststopRec) {

    ...

    //USE LAMBDA HERE TO MAINTAIN SCOPE
    directionsService.route(request, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {

            ...

            this.polylines = polylines;
            this.ref.detectChanges();
        }
    });
}
...