How I can add more than 5 direction in the Agm map using dynamic latitude and longitude?

[explooosion]

Hi @AbdulSiyad777 ,

Sorry, I misunderstood you. This is a bug.

[explooosion]

Because of [OVER_QUERY_LIMIT].

Here are two solutions:

1. Delay directions render by setTimeout

HTML

<agm-map [latitude]="lat" [longitude]="lng">
  <div  *ngIf="directions.length===5">
  <agm-direction
    *ngFor="let dir of directions"
    [origin]="dir.origin"
    [destination]="dir.destination"
    (status)="getStatus($event)"
  >
  </agm-direction>
</div>
</agm-map>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  public lat = 24.799448;
  public lng = 120.979021;

  public directions: any = [];

  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) },
    }];
    for (let i = 0; i < dynamic.length; i++) {
      const d = dynamic[i];
      setTimeout(() => {
        this.directions.push(d);
      }, 500 * (i + 1));
    }
  }

  getStatus(e) {
    // OK or OVER_QUERY_LIMIT
    console.log(e);
  }
}

2. I will add @Input delayRender to fix it.

[explooosion]

Another solution:

HTML

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-direction
      *ngFor="let dir of directions"
      [visible]="done"
      [origin]="dir.origin"
      [destination]="dir.destination"
    >
    </agm-direction>
</agm-map>
<h1 style="text-align: center">Load: {{!done}}</h1>

TS - 1

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  public lat = 24.799448;
  public lng = 120.979021;

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

  delayRender(dynamic: any, key = 0) {
    if (dynamic.length === key) {
      setTimeout(() => { this.done = true; }, 1000);
      return;
    }

    setTimeout(() => {
      this.directions.push(dynamic[key]);
      this.delayRender(dynamic, key + 1);
    }, 1 ); // 1 or more
  }

}

TS - 2

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