Ionic 3/Google Distance Matrix API - google-maps

Question

The basic idea I am trying to execute is:
I have a list of branches, each having lat, lng attributes in them, which contain latitude, and longitude. I want to use the Google Distance Matrix API to find the distance and duration to each one of them.
This is my code..
Branches.ts (page which shows all the branches, where I also want to show the distance and duration)
//other imports
import { TravelDetailsProvider } from '../../providers/travel-details/travel-details';
#IonicPage()
#Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public branchProvider: BranchProvider,
public travelProvider: TravelDetailsProvider
){
}
ionViewDidLoad() {
this.getBranches();
}
getBranchDistanceAndTime(){
for(let branch of this.allBranches){
this.travelProvider.getTravelDetails(branch);
}
}
}
I know that I should probably assign the value which is returned to a variable on my branches.ts and iterate them on the view but for some reason I cannot get a value to return from the getTravelDetails() method
Travel-details.ts
declare var google;
var service = new google.maps.DistanceMatrixService();
#Injectable()
export class TravelDetailsProvider {
private travelDetailsObject: any = {};
constructor(public http: HttpClient) {
}
getTravelDetails(branch){
service.getDistanceMatrix(
{
origins: [new google.maps.LatLng(6.870128,79.880340)],
destinations: [new google.maps.LatLng(branch.lat, branch.lng)],
travelMode: 'DRIVING'
}, this.callback);
}
callback(response, status) {
let travelDetailsObject;
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];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
travelDetailsObject = {
distance: distance,
duration: duration
}
}
}
this.travelDetailsObject = travelDetailsObject;
}
}
}
When I run this code, I get an error: Uncaught TypeError: Cannot set property 'travelDetailsObject' of null
After doing some research, I ran into this github issues page. I'm wondering if this is the problem I am having
https://github.com/rollbar/rollbar.js/issues/344
Thanks for any help

Answer 1

You may try
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();
});
});
}