CODEWITHSUNDEEP
google-mapstypescriptionic3google-distancematrix-api
user538578964
user538578964

Reputation: 773

Ionic 3/Google Distance Matrix API

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

Upvotes: 1

Views: 1567

Answers (1)

Shandu
Shandu

Reputation: 41

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

Upvotes: 2

Related Questions