Android Phonegap - How to Open Native Google Maps Application

Question

I'm working on an Android application using Phonegap and am having trouble figuring out how to open the native Google Maps application to display directions. I don't have any issue opening a map by inserting a URL but opening the application has me stumped. So far I have only been able to find Phonegap related suggestions for development on the iOS platform.

I have added Google Maps to the whitelist permissions, am including the correct Cordova.js file and google maps link in my script tag, have the correct permissions in my AndroidManifest.xml file, included Cordova.jar and Google Map API in my build path, have the Phonegap xml folder in the res directory, js file in my assets/www directory, jar file in the libs directory.

What I am trying to accomplish:

1. When a link is clicked, open the native Google Maps application. If the application is not installed on the device, notify the user that Google Maps is not installed and must be installed.

a. I am already checking for network connectivity and handling that as it should be done.

2. Google Maps opens displaying directions from the user's current location to the location of the link clicked.

The example below works on my Android device exactly the same as it does on iOS but obviously does not open the actions Google Maps application.

<a> href="http://maps.google.com/maps?q=TD Washington DC"><img src="img/ico_pin.png" />White House</a></a>

The second example adds on to the first by including the end location although I wasn't able to figure out how to insert the current location. Most importantly though, it still doesn't open the Google Maps application.

<a href="javascript:openMaps('daddr=1600+Pennsylvania+Ave+NW+Washington+DC+20500+USA');"><img src="img/ico_pin.png" />White House</a>

function openMaps(querystring) {
    var maproot = '';
    maproot = 'http://maps.google.com/maps?saddr=Current+Location&';
    window.location = maproot + querystring;
}

In the third example below, I'm able to display a map within my application. It does show the correct route (from an overhead view from point A to point B) but again doesn't open the actual Google Maps application.

<a id="whDirections" href="#mm_directions" onclick="getDirections()">
                    <img src="img/ico_pin.png" />White House</a>

<div data-role="content">
    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding: 1em;">
        <div id="mapdirections_canvas" style="height: 300px;"></div>
    </div>
</div>

function getDirections() {
    var directionsService = new google.maps.DirectionsService();
    var map;
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        zoom: 9,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapdirections_canvas"), mapOptions);
    directionsDisplay.setMap(map);

    var myLatLng = new google.maps.LatLng(gmmLat, gmmLong);
    if (document.getElementById("whDirections")) {
        var request = {
            origin: myLatLng,
        destination: new google.maps.LatLng(38.897096, -77.036545), 
            travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result); 
        }
    });
}

If anyone has a link or any idea on this, I would really appreciate the help. Other than a 'Hello World' app, this is my first mobile application. Please let me know if I have missed anything or if I am just doing this completely wrong. If any additional information is needed, please let me know.

Thanks in advance for the help.

Answer 1

Use the geo: type uri.

<a href="geo:38.897096,-77.036545">open map</a>

and the user will get the choice of opening any of the mapping applications installed on their device.

Answer 2

This work for me...

var addressLongLat = yourLatitude+','+yourLongitude

For Android Maps App:

window.open("geo:"+addressLongLat);

For iOs Maps App:

window.open("http://maps.apple.com/?q="+addressLongLat, '_system');

For Google Maps in App Browser:

window.open("http://maps.google.com/?q="+addressLongLat, '_system');

Answer 3

For all version of phonegap/cordova or web browser. It will Google map native app.

For Navigation from current location to q - window.open("google.navigation:q=23.3728831,85.3372199&mode=d" , '_system');

For Search - window.open("geo:0,0?q=pizza" , '_system');

Read Here - https://developers.google.com/maps/documentation/android/intents

Answer 4

Launch Navigator Cordova/Phonegap Plugin can be used to navigate to a destination using the native navigation app on:-

1. Android: Google Navigator
2. iOS: Apple Maps/Google Maps
3. Windows Phone: Bing Maps

Answer 5

This is what I use:

function (lat, lon) {
    var latLon = lat + ',' + lon;

    if (device.platform.toUpperCase() === "ANDROID") {
        window.open("geo:" + latLon, "_system");
    } else if (device.platform.toUpperCase() === "IOS") {
        window.open("http://maps.apple.com/?sll=" + latLon + "&z=100&t=k", "_system");
    }
}

Note: when opening Apple maps, the sll=... and t=k, which means I'm specifying an exact longitude and latitude, and t=k means I want apple maps to display satellite imagery. Also, I'm only writing for iOS and Android, so if you're using other platforms be sure to check explicitly for each! I'm pretty sure Android's geo: always works as you would expect, but I could be wrong. Remember: test everything on a real device!

Answer 6

This works in cordova 3.4

window.open("http://maps.google.com/?q=" + address, "_system");

With this method Google Maps shows a marker and can use text address, not only lat-long coordinates