agm-map/agm-Direction = "OVER_QUERY_LIMIT" (Angular 8)

Question

The problem is to create a map with multiple routes and in each route multiple waypoints, for this, I am using Angular with the following modules:

agm-map

agm-Direction

Code implemented:

HTML:

<agm-map [latitude]="latitudeInicial" [zoom]="zoomInicial" [longitude]="longitudeInicial">
  <agm-direction *ngFor="let mapaRota of mapaRotas" [origin]="mapaRota.origin" [destination]="mapaRota.destination" [renderOptions]="mapaRota.options" [waypoints]="mapaRota.waypoints"></agm-direction>
</agm-map>

TS:

  let mapaRota = null;
  let mapaPonto = null;

  let origemLatitude: number = 0;
  let origemLongitude: number = 0;

  let destinoLatitude: number = 0;
  let destinoLongitude: number = 0;

  for (var i = 0; i < this.rotasAgrupadas.length; i++) {
    if (this.rotasAgrupadas[i].key != "Clientes Sem Rota") {
      origemLatitude = this.rotasAgrupadas[i].value[0].oficial_gps_lat;
      origemLongitude = this.rotasAgrupadas[i].value[0].oficial_gps_lon;

      destinoLatitude = this.rotasAgrupadas[i].value[this.rotasAgrupadas[i].value.length - 1].oficial_gps_lat;
      destinoLongitude = this.rotasAgrupadas[i].value[this.rotasAgrupadas[i].value.length - 1].oficial_gps_lon;

      mapaRota = {
        origin: {
          lat: origemLatitude,
          lng: origemLongitude
        },
        destination: {
          lat: destinoLatitude,
          lng: destinoLongitude
        },
        options: {
          polylineOptions: {
            strokeColor: this.rotasAgrupadas[i].cor
          }
        },
        travelMode: "DRIVING",
        waypoints: []
      };

      for (var j = 0; j < this.rotasAgrupadas[i].value.length; j++) {
        if (j > 0 && j < this.rotasAgrupadas[i].value.length) {
          mapaPonto = {
            location: {
              lat: this.rotasAgrupadas[i].value[j].oficial_gps_lat,
              lng: this.rotasAgrupadas[i].value[j].oficial_gps_lon
            },
            stopover: true
          };

          mapaRota.waypoints.push(mapaPonto);
        }
      }

      this.mapaRotas.push(mapaRota);
    }
  }

It mounts 5 routes perfectly, more starting from the 5th route, I get the following exception:

DIRECTIONS_ROUTE: OVER_QUERY_LIMIT: There was an Issue Performing a Directions request.

How could I solve based on the already implemeted code? Any help will be welcome!

Answer 1

I had the same problem and solved by initializing the variables at the beginning of the method in the TS class.

this.latitudeInicial = Undefined; this.longitudeInitial = Undefined; this mapRotas = [];