agm-direction not working properly for multiple points

[saishikkanderCL]

Issue description I am trying to find the directions between the multiple agm-markers, but i can see the directions only for some markers.I followed the agm-direction documents and constructed the for loop to find the discription

Steps to reproduce and a minimal demo of the problem gpsLogs = [ { "origin": { "lat": 1.369974970817566, "lng": 103.83807373046875 }, "destination": { "lat": 1.369974970817566, "lng": 103.83807373046875 }, "renderOptions": { "polylineOptions": { "strokeColor": "#FFA02F", "strokeWeight": 2 }, "suppressMarkers": true } }, { "origin": { "lat": 1.369974970817566, "lng": 103.83807373046875 }, "destination": { "lat": 1.27491295337677, "lng": 103.79949951171875 }, "renderOptions": { "polylineOptions": { "strokeColor": "#FFA02F", "strokeWeight": 2 }, "suppressMarkers": true } }, { "origin": { "lat": 1.27491295337677, "lng": 103.79949951171875 }, "destination": { "lat": 1.274919033050537, "lng": 103.79950714111328 }, "renderOptions": { "polylineOptions": { "strokeColor": "#FFA02F", "strokeWeight": 2 }, "suppressMarkers": true } } ...... and many more ]

<agm-direction *ngFor="let logs of gpsLogs;" [origin]="logs.origin" [destination]="logs.destination" [renderOptions]="logs.renderOptions"> Current behavior

Expected/desired behavior All the markers should be connected

[explooosion]

Hi @saishikkanderCL !

You can use waypoints or checkout example: Load multiple directions [avoid query limit].

<agm-map>
    <agm-direction
        *ngFor="let dir of directions"
        [visible]="done"
        [origin]="dir.origin"
        [destination]="dir.destination"
    >
    </agm-direction>
</agm-map>

public directions: any = [];
public done = false;

ngOnInit() {
const dynamic = [{
    origin: { lat: Number(24.7992116), lng: Number(120.974784) },
    destination: { lat: Number(24.7994235), lng: Number(120.971342) },
},
{
    origin: { lat: Number(24.7984561), lng: Number(120.977411) },
    destination: { lat: Number(24.7989161), lng: Number(120.976215) },
},
{
    origin: { lat: Number(24.7963123), lng: Number(120.971211) },
    destination: { lat: Number(24.7969451), lng: Number(120.972611) },
},
{
    origin: { lat: Number(24.7944416), lng: Number(120.974444) },
    destination: { lat: Number(24.7945116), lng: Number(120.976612) },
},
{
    origin: { lat: Number(24.7942116), lng: Number(120.978184) },
    destination: { lat: Number(24.7947726), lng: Number(120.9789124) },
},
{
    origin: { lat: Number(24.7912135), lng: Number(120.971184) },
    destination: { lat: Number(24.7924125), lng: Number(120.969914) },
}];

this.directions = dynamic;
setTimeout(() => { this.done = true; }, 1500);
}

By the way, you need to notice Status of Directions Query for MAX_WAYPOINTS_EXCEEDED or OVER_QUERY_LIMIT.

ref #65

[saishikkanderCL]

I am facing the MAX_WAYPOINTS_EXCEEDED error. Is there any way to add the direction dynamically one by one? so that i can add direction every 100 milliseconds.

[explooosion]

The following usage limits and restrictions apply:

1. The maximum number of waypoints allowed when using the Directions service in the Maps JavaScript API is 23, plus the origin and destination. The limits are the same for the Directions API web service.
2. For the Directions API web service, customers are allowed 23 waypoints, plus the origin, and destination.

ref:

• 72

• Limits and Restrictions for Waypoints
• Status of Directions Query

---

Maybe you can use setTimeout to delay each queries for waypoints. Set visible=true when all queries have been finish.

[Jasa-Bcone]

@explooosion Hi, I agree with you but the thing is if we have 500 routes then it'll take 500 seconds to load all routes. how can we reduce it?