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?

Solution 1

Changing http://maps.apple.com/?q= to just maps: did the trick.

---

NB: make sure you write maps: and not map: as, while the latter will run the correct app, it will crash immediately after opening (thanks jprofitt)

Solution 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.

Solution 3

In my case, changing from http://maps.apple.com/?q= to only maps:?q= not solving the problem.

The working scheme that open native Apple Maps with marker is as follows:

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

full working code:

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

Tested working with iOS7.1 simulator, might not works in later version. I don't have the opportunity to test. Sorry.

Supported Apple Maps parameters can be found here: https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html

Credit goes to this SO link: Here

Solution 4

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.

View more solutions