Phonegap - Open Navigation Directions in Apple Maps App

Question

I have two variables - Destination and Source - and, using Phonegap, I'm trying to use jQuery to open the external iPhone Apple Maps app with directions.

The code I'm using looks like this:

var url = 'http://maps.apple.com/?q=daddr='+destination+'&saddr='+source;
window.location = url;

Whenever I click the relevant button however, it opens a new view in-app with Google directions as a webview, and I cannot return to the original app.

How can link be opened instead with the iOS default map application?

Answer 1

The code

I managed to get this working in 2018 on iOS 11.2 using the following format in iOS:

<a onclick="window.open('maps://?q=51.178847,-1.826160', '_system');">Open in Maps</a>

And this format on Android:

<a onclick="window.open('geo:0,0?q=51.178847,-1.826160', '_system');">Open in Maps</a>

Config permissions

Additionally, don't forget to add permissions to your config.xml file like so:

<allow-intent href="maps:*" />

In my project the geo: intention had existed from the beginning so it took my a while to figure out why this was working on Android and not iOS.

Answer 2

Today I was able to open the native Apple Maps app with marker from a Cordova app using BOTH of the follow URL schemes:

maps://maps.apple.com/?q={latitude},{longitude}

AND

maps://?q={latitude},{longitude}

In a link:

<a href="maps://maps.apple.com?q={latitude},{longitude}">
<!-- OR -->
<a href="maps://?q={latitude},{longitude}">

From JavaScript:

window.location.href = "maps://maps.apple.com/?q="+lat+","+lng;
// OR
window.location.href = "maps://?q="+lat+","+lng;

The app is running on an iOS device, iOS version 8.1.2, and cordova-ios is version 3.7.0.