Angular5 | XHR finished loading: GET “<URL>” keeps running

Question

I have an angular 5 application with supported by an api that provides a list of nearby couriers (taxi drivers) for of the selected marker location. Everything was working perfectly until today that it seems like it keeps requesting for the couriers' locations from an api. the request is made from a method in a service.

Anyone facing this issue before?

Component:

ngOnInit() {
    this.loadMap();
    this.startMap();
    this.loadCustomerAddresses();
}
startMap(){

    google.maps.event.addListener(this.map, 'idle', () => {

      if(this.sourceConfirmed == false){
        this.locateSource();
      }else if(this.destinationConfirmed == false){
        this.locateDestination();
      }else if(this.addingNextDestination == true){
        this.destComponent.locateNextDestination();
      }else{
        return false;
      }
  })

locateSource(){

  this.markerSource = new google.maps.Marker({
    position: this.map.getCenter(),
    map: this.map,
    draggable: false
  });
  this.markerSource.setVisible(false);

  this.mapCenter = this.map.getCenter();
  this.markerSource.setPosition(this.mapCenter);
  this.sourceLat = this.markerSource.getPosition().lat();
  this.sourceLng = this.markerSource.getPosition().lng();
  this._orderService.getPlaceName(this.sourceLat, this.sourceLng).subscribe(
    name => {
      this.sourceAddress = name;
    }
  );

  this._orderService.loadCouriersNearby(this.mapCenter.lat(), this.mapCenter.lng()).subscribe(
    result => {
      if(result.status == 'success'){
        let couriers = result.couriers;
        this._zone.run(() => {
          this.couriersCount = couriers.length;
        });
        for (let courier of couriers) {
          let latLng = {lat: Number(courier.location.latitude), lng: Number(courier.location.longitude)};
          let courierMarker = new google.maps.Marker({
            position: latLng,
          })
          courierMarker.setMap(this.map)
          this.couriersMarkers.push(courierMarker);
        }
      }else{
        this._zone.run(() => {
          this.couriersCount = 0;
        });
      }
    }
  );
}

Service:

loadCouriersNearby(lat, lng){
  var url = 'http://my.domain.path';
  var headers = new HttpHeaders().set('x-mobile-token', this._cookieService.get('token'));
  var params = new HttpParams()
    .set('latitude', lat)
    .set('longitude', lng)

  return this.http.get(url, {headers: headers, params: params}).map(response=>response.data);
}

It is now sending approximately 3 requests per second to the API to get points and they do send back a list of couriers but the high number of requests do not allow the couriers' mrakers (responsed by the service) to be displayed on the map. What am i supposed to do with this?

Answer 1

SOLVED: Looks like it's any site using the experimental version of the API

If you add ?v=3 to the js call then it will use the release version (3.31) instead of (3.32)