title: Angular / google map not drawing polyline between path points
body: <p>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.</p>
  
  <p></p>
  
  <pre><code>&lt;agm-map [latitude]="lat" [fitBounds]="bounds" [longitude]="lng" [zoom]="defaultZoom"&gt;
   &lt;agm-polygon &gt;
      &lt;ng-container&gt;
          &lt;agm-polyline *ngFor="let polyline of polylines;let i = index;"  [strokeColor]="polyline.color" [visible]="true" [zIndex]="1"&gt;
             &lt;agm-polyline-point *ngFor="let pint of polylines.path" [latitude]="pint.lat" [longitude]="pint.lng"&gt;
             &lt;/agm-polyline-point&gt;
         &lt;/agm-polyline&gt;
      &lt;/ng-container&gt;
      &lt;/agm-polygon&gt;
     &lt;sebm-google-map-directions [origin]="origin" [destination]="destination" [travelMode]="travelMode"&gt;&lt;/sebm-google-map-directions&gt;
    &lt;/agm-map&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> 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;
  
        }
      }); 
    }
  </code></pre>
  
  <p></p>
  
  <p>My Data is there but the polyline path isnt drawing on the map </p>
  
  <blockquote>
    <p>[{"path":[{"lat":39.1876259,"lng":-96.58321000000001},null],"color":"red","strokeWeight":3},....]</p>
  </blockquote>