Ionic - Open Navigation Directions in Apple Maps App

Question

I have a variable, the destination, and I need to open the native Apple Maps with the pin to reach the destination. I've tried the solutions answered here: Phonegap - Open Navigation Directions in Apple Maps App but that didn't work. If I reach "maps://xx.xxxx,yy.yyyy" through a browser while testing, it opens a "unsafe:/maps://xx.xxxx,yy.yyyy". It doesn't pin the map, it never point me to the destination i choose. How can i fix that?

Answer 1

I use the LaunchNavigator cordova plugin to easily achieve this desired result. This works best on iOS and Windows Phones when paired with the Geo-Location cordova plugin.

To add the LaunchNavigator and Geo-Location Cordova Plugins: open a terminal window, navigate to the root of the project directory and run the following two commands.

cordova plugin add cordova-plugin-geolocation
cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator 

after which I implement the functionality of mapping to a given latitude/longitude by adding the following code to my project.

var latitude = 39.7392, longitude = -104.9903;
launchnavigator.navigate([latitude, longitude]);

or I implement the functionality of mapping to an address string by adding the following code to my project.

var destination = "Denver, Colorado";
launchnavigator.navigate(destination);

I have found this to be the simplest means by which to provide "click for directions" functionality to the end users of the mobile app. This works well for me (with no change in code) for iOS, Android and Windows Phone apps.

Answer 2

You can try 2 things

1. Add this line to your config.xml

   <access origin="maps:*" launch-external="yes" />

2. Use inAppBrowser Plugin with _system option:

   var ref = window.open('maps://?q=xx.xxxx,yy.yyy', '_system');

But you should check the url schemes for the maps app https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html#//apple_ref/doc/uid/TP40007899-CH5-SW1

If you want directions you should use the daddr= param

Answer 3

If you have an address string e.g. "24 Prince Street, New York, NY":

$scope.launchDirections = function(address) {
   window.location.href = "maps://maps.apple.com/?daddr=" + address;
}

Of if you have lat-longs e.g. lat: -33.8880165, long: 151.2310152:

$scope.launchDirections = function(lat, long) {
   window.location.href = "maps://maps.apple.com/?q=" + lat + "," + long;
}

Then call it in your html:

<div ng-click="launchDirections(address)">Show Directions</div>