Matrix Service

Ionic Framework ionic-v3
1

Good afternoon community.
I have a problem with a function that I call to get the distance and the cost in the Google Matrix service, my function serves and does what it should do but it executes a method that calls a function what happens is that the method is executed so fast that it does not let the function finish and that function is that I depend to show the result.
Anyone who can tell me how to subscribe or do it in a more dynamic way so that it works for me

My code

calcularDistancia(){
  let loading = this.loadingCtrl.create({
    content: 'Espere un momento' 
  });
  loading.present();

var origin1 = new google.maps.LatLng(this.lat, this.lng);
var origin2 = 'San Francisco, Costa Rica';
var destinationA = this.Destination;
var destinationB = new google.maps.LatLng(9.9600628, -84.1280971);

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
  {
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    //transitOptions: TransitOptions,
    //drivingOptions: DrivingOptions,
    //unitSystem: UnitSystem,
    //avoidHighways: Boolean,
    //avoidTolls: Boolean,
  }, callback);

  function callback(response, status) {
    console.log(response);
    console.log(status);
    this.costoGrua = 20000;

    if (status == 'OK') {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
        var element = results[j];
        this.distancia = element.distance;
        let time = element.duration;
        this.tiempo = time.text;
        var from = origins[i];
        var to = destinations[j];
      }
    }
    let dist = +this.distancia.value;  
    this.distanciaFinal = this.distancia.text

    //Metodo para sacar el costo 
    let distanciaRedondeada = Math.round(dist/1000);
    if(distanciaRedondeada > 15){
      for(let i = 15; i < distanciaRedondeada; i++){
        let adicional = 250;
        this.costoGrua = this.costoGrua + adicional;
      }
    }
    this.existeDireccion = true;
    loading.dismiss();
  } else{
    this.existeDireccion = false;
    loading.dismiss();
  }
    console.log("QUE VERGAS");
    console.log(this.existeDireccion);
    console.log(this.costoGrua);
    console.log(this.distanciaFinal);
    console.log(this.tiempo);
    // See Parsing the Results for
    // the basics of a callback function.
  }

  console.log("WTF");
  console.log(this.existeDireccion);
  console.log(this.costoGrua);
  console.log(this.distanciaFinal);
  console.log(this.tiempo);
}

This is how it runs

46
Captura de pantalla 2018-10-17 a la(s) 14.24.46.png713×260 25.8 KB

1 Like
2

Adding proper status checking and error handling is an exercise left to the reader, but the fundamental idea of transforming a callback into an Observable looks like so:

constructor() {
  this._mx = new google.maps.DistanceMatrixService();
}

getDistanceMatrix(req: DistanceMatrixRequest): Observable<DistanceMatrixResponse> {
  return Observable.create((observer) => {
    this._mx.getDistanceMatrix(req, (rsp, status) => {
      // status checking goes here
      observer.next(rsp);
      observer.complete();
    });
  });
}
1 Like
3

Thanks rapropos, always made a crack.
The only thing is that I can not find how to implement that DistanceMatrixRequest and the DistanceMatrixResponse I have been reading and researching in the documentation but I can not find anything.
It will be that you give me an explanation in broad strokes or tell me how to better understand your code.
Thanks in advance

4

Simply add @types/googlemaps to your project, and then throw the following at the top of any file needing those types:

if you are using Ionic v3 (TS <2.8),

import {} from "@types/googlemaps";

…or if Ionic v4 (TS >= 2.8):

/// <reference types="@types/googlemaps" />
1 Like
5

Same to you sir. data is undefined i would like to know how to solve. please:grinning: