Multiple directions with multiple colors in Agm-Direction

Question

I am using Agm-Direction with Angular Google Maps to draw driving path between two points.

<agm-map [latitude]="6.9271" [longitude]="79.8612">

 <agm-direction [origin]="{ lat: 6.8403134, lng: 80.0021128 }" [destination]="{ lat: 6.71532762, lng: 80.06215197 }">
 </agm-direction>

  <agm-direction [origin]="{ lat: 6.4319639, lng: 79.9983415 }" [destination]="{ lat: 6.73906232, lng: 80.15640132 }">
  </agm-direction>

  <agm-direction [origin]="{ lat: 6.71532762, lng: 80.06215197 }" [destination]="{ lat: 6.4319639, lng: 79.9983415 }">
  </agm-direction>

</agm-map>

I need to draw multiple driving paths in multiple colors. Currently draw all directions in blue color.

How can I draw multiple directions in different colors?

Answer 1

Found the answer.

We can set the polylineOptions to draw direction in different color.

HTML

<agm-map [latitude]="6.9271" [longitude]="79.8612">
  <agm-direction *ngFor="let dir of dirs" [origin]="dir.origin" [destination]="dir.destination" [renderOptions]="dir.renderOptions">
  </agm-direction>
</agm-map>

TS

public dirs: Array<any> = [{
  origin: { lat: 6.8403134, lng: 80.0021128 },
  destination: { lat: 6.71532762, lng: 80.06215197 },
  renderOptions: { polylineOptions: { strokeColor: '#f00' } },
}, {
  origin: { lat: 6.4319639, lng: 79.9983415 },
  destination: { lat: 6.73906232, lng: 80.15640132 },
  renderOptions: { polylineOptions: { strokeColor: '#0f0' } },
}];

More details available on https://github.com/explooosion/Agm-Direction/issues/46