Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mobile html5 launch phone's native navigation app

Tags:

html

cordova

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

<a href="http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>

I'm amazed that Phonegap hasn't implemented something like this.

like image 385
David Avatar asked Jan 11 '13 21:01

David


People also ask

Is it possible to use HTML5 for mobile applications?

The same HTML5 app will work on different mobile operating systems, whether that's iOS, Android, Windows Phone or Blackberry; the upshot of this is that the cost of developing the app is much lower than creating native apps for each OS.

What is HTML5 in mobile app?

An HTML5 mobile app is a Web application developed with that version of the Web content standard and designed for smartphones, tablets and other handheld devices. The earlier versions couldn't support the complex functionalities required for developing mobile applications.


2 Answers

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

like image 148
DaveAlden Avatar answered Sep 28 '22 08:09

DaveAlden


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:

  1. Open a console window
  2. Go to your Phonegap app root
  3. Then execute: phonegap local plugin add https://github.com/viktor0710/PhoneNavigator-Phonegap-3.x.git
  4. Copy "phonenavigator.js" from the repo (www/phonenavigator.js) in your app (ex: yourapp/www)
  5. include "phonenavigator.js" in you app:
  6. Copy "cordova.js" from the repo (www/cordova.js) in your app (ex: yourapp/www)
  7. 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");
    }
);
like image 24
viktor0710 Avatar answered Sep 28 '22 08:09

viktor0710