Google navigation using javascript in Cordova/Phonegap

Question

I am using cordova application of telerik appbuilder based on HTML, javascript and css with Google Maps API v3 developing app for iOS and android. I have 2 points A and B each having different latitude and longitude for which, I am able to show a path to move from A to B on map using Google API.

Now I want to do navigation from A to B in the app itself. I don't want to open the native app for map available in ios or android.

I don't know how can I do this navigation from A to B? As its a real time app which will show my current location. For navigation it will show my current location starting from A and will move according to my current location up to B.

Hope someone can let me know any good solution.

Answer 1

I don't understand why you wouldn't want to use the native navigation app to do the navigating. To do this within your own app, you will have to effectively write your own version of Google Navigator/Apple Maps and embed it within your app, because there's no mechanism by which the native navigation app functionality can be embedded inside your app.

It's a much easier solution to pass location A & B to the native navigation app - this cordova/phonegap plugin will allow you to do this.

Another alternative is to display the navigation directions using the google maps website in the cordova child browser; that way the user isn't leaving your app:

window.plugins.ChildBrowser.showWebPage('https://www.google.com/maps?saddr=' + latA + ',' + lonA + '&daddr=' + latB + ',' + lonB + '', {
    showLocationBar: true
});

Answer 2

Thanks for the reply.

I have implemented the navigation using the given link below- https://github.com/dpa99c/phonegap-launch-navigator/

I have given the code as shown below for this.

                launchnavigator.navigate("aSourceAddress", "bDestinationAddress",
                function () {
                    alert("plugin success map");
                },
                function (error) {
                    alert("plugin error: " + error);
                },
                {
                    preferGoogleMaps: true,
                    urlScheme: "TestMap2",
                    backButtonText: "TestMap2"
                });

Its switching to google maps app and navigating perfectly. But after we reach to destination, it does not come back to our app automatically.

I have also used custom URL plugin as available from- https://github.com/Telerik-Verified-Plugins/Custom-URL-scheme