CODEWITHSUNDEEP
google-mapstypescriptionic-frameworkionic2directions
Ninoop p george
Ninoop p george

Reputation: 678

ionic 2 open google maps with directions from 2 locations

I need to open google maps when i click a button and show directions from a source location and destination location. By searching a lot i figured out a way with InAppBrowser, but it doesnt work.

Here is the code i found:

  this.geolocation.getCurrentPosition().then((data) => {
      let lat = data.coords.latitude;
      let lng = data.coords.longitude;
      let bro = new InAppBrowser;

      if (this.platform.is('ios')) {
        bro.create('geo://?q=&saddr=' + data.coords.latitude + ',' + data.coords.longitude + '&daddr=' + this.dataitem['lat'] + ',' + this.dataitem['lng'], '_system');
      };
      if (this.platform.is('android')) {
        bro.create('geo://?q=' + data.coords.latitude + ',' + data.coords.longitude + '&daddr=' + this.dataitem['lat'] + ',' + this.dataitem['lng'] + '', '_system');
      };
  }).catch((err) => {
      console.log(JSON.stringify(err));
  });

Can someone help?

Upvotes: 2

Views: 4081

Answers (2)

Jagan
Jagan

Reputation: 111

Use this to open maps, make sure In App Browser plugin is installed.

let destination = latitude + ',' + longitude;

if(this.platform.is('ios')){
  window.open('maps://?q=' + destination, '_system');
} else {
 let label = encodeURI('My Label');
 window.open('geo:0,0?q=' + destination + '(' + label + ')', '_system');
}

Reference

Upvotes: 1

Dhaval Jivani
Dhaval Jivani

Reputation: 9697

Install Launch Navigator plugins:

  1. Install the Cordova and Ionic Native plugins:

ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator

npm install --save @ionic-native/launch-navigator

  1. add LaunchNavigator into app.module.ts

  2. Add this code into your ts file :

    source: any = [22.303894, 70.802160] // source lat,long
destination: any =  [23.022505, 72.571362] // dest lat,long

navigate(){

let options: LaunchNavigatorOptions = {
   start: this.source
};

 this.launchnavigator.navigate(this.destination, options)
   .then(
    success => alert('Launched navigator'),
    error => alert('Error launching navigator: ' + error)
 );
}

Done!

Upvotes: 4

Related Questions