Ionic 3 Launch Navigator

Ionic 3 Launch Navigator

Used Plugins

ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
npm install --save @ionic-native/launch-navigator

Create Your Project

ionic start projectName blank

Change Directory To Your Ionic Project:

cd screenshotProject

Create a Page 

ionic g page locationLauncher

Add following lines in app.module.js

import { LocationLauncherPage } from '../pages/location-launcher/location-launcher';

declarations:[
.....
LocationLauncherPage
],
entryComponents : [
....
LocationLauncherPage
]

Add The following to location-launcher.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Launch Navigator</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label floating>Source</ion-label>
      <ion-input type="text" [value]="sourcePoint" [(ngModel)]="sourcePoint"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Destination</ion-label>
      <ion-input type="text" [value]="destinationPoint" [(ngModel)]="destinationPoint"></ion-input>
    </ion-item>
  </ion-list>
  <button ion-button (click)="launchBySourceDest()">Launch By Source & Destination</button>
  <ion-list>
    <ion-item>
      <ion-label floating>Destination</ion-label>
      <ion-input type="text" [value]="destinationPoint1" [(ngModel)]="destinationPoint1"></ion-input>
    </ion-item>
  </ion-list>
<button ion-button (click)="launchByDest()">Launch By Destination GOOGLE_MAPS</button>
<h5 text-center>This button launches from current location to destination using Google Maps</h5>

<ion-list>
  <ion-item>
    <ion-label floating>Destination</ion-label>
    <ion-input type="text" [value]="destinationUber" [(ngModel)]="destinationUber"></ion-input>
  </ion-item>
</ion-list>
<button ion-button (click)="launchByDestUber()">Launch By Destination UBER</button>
<h5 text-center>This button launches from current location to destination using Uber</h5>
    <ion-list>
      <ion-item>
        <ion-label floating>Destination</ion-label>
        <ion-input type="text" [value]="destinationSelect" [(ngModel)]="destinationSelect"></ion-input>
      </ion-item>
    </ion-list>
<button ion-button (click)="launchBySelection()">Launch By Selecting App</button>
</ion-content>

Add the following code in location-launcher.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';

@Component({
  selector: 'page-location-launcher',
  templateUrl: 'location-launcher.html',
  providers :[LaunchNavigator]
})
export class LocationLauncherPage {
  sourcePoint : any;
  destinationPoint : any;
  destinationPoint1: any;
  destinationSelect: any;
  destinationUber : any;
  constructor(public navCtrl: NavController,
      public navParams: NavParams,
      private launchNavigator: LaunchNavigator) {
  }

launchBySourceDest(){
  let options: LaunchNavigatorOptions ={
    start : this.sourcePoint,
    app : this.launchNavigator.APP.GOOGLE_MAPS
  }

  this.launchNavigator.navigate(this.destinationPoint,options).then(()=>{
      console.log("launched successfully");
  }).catch(()=>{
    console.log("launch failed");
  });
}

launchByDest(){
  let options: LaunchNavigatorOptions ={
    app: this.launchNavigator.APP.GOOGLE_MAPS
  }
  this.launchNavigator.navigate(this.destinationPoint1,options).then(()=>{
      console.log("launched successfully");
  }).catch(()=>{
    console.log("launch failed");
  })
}
launchByDestUber(){
  let options: LaunchNavigatorOptions ={
    app: this.launchNavigator.APP.UBER
  }
  this.launchNavigator.navigate(this.destinationPoint1,options).then(()=>{
      console.log("launched successfully");
  }).catch(()=>{
    console.log("launch failed");
  })
}
launchBySelection(){
  let options: LaunchNavigatorOptions ={
  }
  this.launchNavigator.navigate(this.destinationPoint1,options).then(()=>{
      console.log("launched successfully");
  }).catch(()=>{
    console.log("launch failed");
  })
}
}

Run The Application: 

ionic cordova run android

Input 

Enter location names in the text fields and click on buttons