mobile html5 launch phone's native navigation app - html

Question

I'm developing a phonegap/cordova app. Is there a way to open a phone's native navigation app within the browser view? Or is there a best practice on opening native map applications from html5 apps? Or are they all platform specific?
I've read some places that the following works for certain versions of Android
<a href="geo:some address here" />Navigate to here</a>
and that this works for iOS
Directions
I'm amazed that Phonegap hasn't implemented something like this.

Answer 1

You can open the native navigation app on iOS 5 (Google Maps) and iOS 6 (Apple Maps) by using the magic "maps:" protocol, e.g. window.location = "maps:daddr=50.4,-4.5"
But to launch the native Google Navigator app on Android you need to use a phonegap plugin. I wrote this one for my own purposes.
Update
The plugin has now been updated for Phonegap 3.x and supports Android, iOS and Windows Phone, including an option to prefer Google Maps on iOS.
The plugin is here: https://github.com/dpa99c/phonegap-launch-navigator

Answer 2

The plugin is great! Thanks for sharing!
I tried it in my app but unfortunately I have Phonegap version 3.x and your plugin is only working for Phonegap 2.x :(
So in order to get it working on Phonegap 3.x I got the plugin from your github repo and made some changes so that it works for 3.x
The modified PhoneNavigator Plugin for Phonegap 3.x can be downloaded from my github repo:
https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
How to integrate it in your Phonegap 3.x project:
Open a console window
Go to your Phonegap app root
Then execute: phonegap local plugin add https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
Copy "phonenavigator.js" from the repo (www/phonenavigator.js) in your app (ex: yourapp/www)
include "phonenavigator.js" in you app:
Copy "cordova.js" from the repo (www/cordova.js) in your app (ex: yourapp/www)
include "cordova.js" in you app:
How to use it:
//function declaration
function navigateTo (lat, lon, successFn, errorFn) {
cordova.require('cordova/plugin/phonenavigator').doNavigate(lat, lon, successFn, errorFn);
}
//set lat and lon variables. Most probably read them from the UI
var latitude = 48.137607;
var longitude = 11.568569;
//call function
navigateTo(
latitude,
longitude,
function(){
console.log("Successfully opened navigator");
},
function(){
console.log("Error opening navigator");
}
);

Answer 3

As mentioned above, the following works on Galaxy S4 Android (just tested it), to bring up the Google Maps/Navigation app and waze:
Wikimedia Headquarters
Credit: http://en.wikipedia.org/wiki/Geo_URI#Example
Please also see the answer here: https://stackoverflow.com/a/19765368/2728686

Answer 4

For the record, if someone find this thread by looking on Google like I did, it worked for me directly, working with Ionic framework, by doing two things :
In the myapp.config(...) of your app add
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|geo):/);
(dont forget to add $compileProvider as a dependency)
In the config.xml, add the line
<access origin="geo:*" launch-external="yes"/>
That's all.

Answer 5

Cordova 3.6.0 introduces a second whitelist, for restricting which URLs are allowed to launch external applications. In previous versions of Cordova, all non-http URLs, such as mailto:, geo:, sms: and intent, were implicitly allowed to be the target of an a tag. Because of the potential for an application to leak information, if an XSS vulnerability allows an attacker to construct arbitrary links, these URLs must be whitelisted as well, starting in Cordova 3.6.0.
Cordova 3.6.0 Whitelist Guide
So you need to add explicitly in the config.xml:
<access origin="tel:*" launch-external="yes" />
<access origin="mailto:*" launch-external="yes" />