Ionic 3 - Open geolocation without navigation with Google Maps / Apple Maps app

Question

In my Ionic 3 app for Android and iOS , I need to open a specific geolocation with Google Maps (if installed) or Apple Maps . I discovered Launch Navigator which pretty much does the same.

1. Is there a way by which I can choose not to navigate to the specified location and only show a marker using Launch Navigator ?
2. If not, are there any other alternatives to make this possible?

Answer 1

I had the same issue and this is what I came up with. There are three important steps

1. Check to see if the user is on iOS or Android
   • need to include Platform import { Platform } from 'ionic-angular';
2. If they are on iOS check for Google Maps
   • I'm using LaunchNavigator to check for the app
     import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';
3. Open the appropriate app with our GPS parameters
   • To open an external app we need the In App Browser
     import { InAppBrowser } from '@ionic-native/in-app-browser';

then we have all we need to open Google Maps on iOS if it's available, with no navigation

if (this.platform.is('ios')) {
      //try google maps first
      this.launchNavigator.isAppAvailable(this.launchNavigator.APP.GOOGLE_MAPS).then(
        response => {
          if(response) {
              window.open('comgooglemaps://?q=' + lat + ',' + lng + '(' + marker_name + ')', '_system');
          }
          else {
              window.open('maps://?q=' + lat + ',' + lng, '_system');
          }
        },
        failure => {
          //check failed;
        }
      );
}
else if (this.platform.is('android')) {
      window.open('geo://' + lat + ',' + lng + '?q=' + lat + ',' + lng + '(' + marker_name + ')', '_system');
}

Answer 2

Try this, it let the user to choose the app navigation ( waze or map or...) to open, and add a marker on latitude and longitude given:

  import { Platform } from '@ionic/angular';

...

  constructor(
    public platform: Platform
  ) {
  }

  public openMapsApp(lat: number, lng: number) {
    const geocoords = lat + ',' + lng;

    if (
      this.platform.is('ios')
      && this.platform.is('iphone')
      && this.platform.is('ipad')
    ) {
      window.open('maps://?q=' + geocoords, '_system');
      return;
    }
    
    if (this.platform.is('desktop')) {
      window.open('https://www.google.com/maps?q=' + geocoords);
      return;
    }

    const label = encodeURI('7 East Street'); // encode the label!
    window.open('geo:' + geocoords + '?q=' + geocoords + '(' + label + ')', '_system');

  }