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},....]

i think you are variable is local scope try to define the variable globally — Chellappan வ, Aug 29 '18 at 18:56
I got the notification but the comment was gone when I tried to see it — Thirdletter_CutsClean, Aug 29 '18 at 19:12
this.ngZone.detectChanges(); Uncaught TypeError: Cannot read property 'detectChanges' of undefined — Thirdletter_CutsClean, Aug 29 '18 at 20:47

score 0 · Accepted Answer · answered Aug 29 '18 at 22:54

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

Uncaught TypeError: Cannot read property 'detectChanges' of undefined. I have it imported and placed in the constructor — Thirdletter_CutsClean, Aug 30 '18 at 14:23

Angular / google map not drawing polyline between path points

1 Answers1