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:

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.

I think google maps will opened to a link starting with geo://.... — Chen Kinnrot, Apr 01 '13 at 14:45

score 62 · Accepted Answer · answered Apr 01 '13 at 15:23

62

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.

answered Apr 01 '13 at 15:23

Simon MacDonald

23,253
5
58
74

1

So if I want to pass in a start and end address for navigation could I not do something similar to what I did above?
Directions function openMaps(querystring) { var maproot = ''; var lat = position.coords.latitude; var lng = position.coords.longitude; var myLoc = new google.maps.Lat.Lng(lat, lng); maproot = "geo:" + myLoc + "?saddr=" + myLoc; window.location = maproot + querystring; } – Brian Apr 01 '13 at 15:50
4

Geo URI scheme geo:latitude,longitude http://developer.android.com/guide/appendix/g-app-intents.html – Anders B Dec 26 '13 at 19:32
15

Cordova 3.6.0 introduces a second whitelist, for restricting which URLs are allowed to launch external applications. [Cordova 3.6.0 Whitelist Guide](http://cordova.apache.org/docs/en/3.6.0/guide_appdev_whitelist_index.md.html) So you need to add explicitly in the config.xml: – delkant Oct 11 '14 at 17:23
[I'm doing this exact command](http://stackoverflow.com/questions/26876392/why-launching-native-google-maps-application-from-cordova-shows-antartica) with access origin geo in config.xml but it brings me to antartica (probably with geo:0,0). Why ? – Miles M. Nov 11 '14 at 23:16
1

Does this work also with the raw address, without coordinates? – Piero Alberto May 16 '17 at 09:58
1

It doesn't work for me. It opens Google Maps on the area of the coords, but without any marker and possibility to initiate gps navigation. I had to fall back to querying to google.com/maps, like so: https://www.google.com/maps/search/?api=1&query=39.34324,1.23434 Any idea why this might happen? – luis.ap.uyen Sep 11 '19 at 15:31
@luis.ap.uyen I am also facing the same issue, did you get the solution?? – Shiva Burade Jan 23 '20 at 12:12

score 16 · Answer 2 · edited Jun 30 '15 at 10:08

16

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');

edited Jun 30 '15 at 10:08

Pratik Butani

60,504
58
273
437

answered Feb 26 '15 at 05:48

Carlos Galeano

384
5
13

IF I am programming once for android/iPhone how can i make it know which function to use depending on what phone type the user is using? – Mike Aug 26 '15 at 00:18
try device.platform: http://cordova.apache.org/docs/en/3.0.0/cordova_device_device.md.html#device.platform – ledragon Sep 15 '15 at 10:11
You need to check what platform is before. Use the plugin Device: https://www.npmjs.com/package/cordova-plugin-device. And... if(device.platform == 'iOS'){ // DO IOS THINGS } else if(device.platform == 'Android'){ // DO ANDROID THINGS } Whatever platform you need. – Carlos Galeano Sep 18 '15 at 18:53
window.open("http://maps.apple.com/?q="+addressLongLat, '_system'); Not working in iOS, any suggestion – Saj Jul 17 '19 at 09:03

score 6 · Answer 3 · answered Jul 21 '15 at 10:40

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

score 2 · Answer 4 · answered Sep 01 '15 at 08:42

2

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

Android: Google Navigator
iOS: Apple Maps/Google Maps
Windows Phone: Bing Maps

answered Sep 01 '15 at 08:42

Dhaval Jivani

9,467
2
48
42

David Toledo · Answer 5 · 2019-12-18T21:40:35.350

If you just want to open the native Maps App by using the address instead of latitude and longitude, here is a simple solution that works for Android and iOS:

function openNativeMapsApp(address) {

    console.log('Opening the native maps app...');

    var maps_schema;

    // Replace the following "if" line to your own way of identifying the system (android or ios)
    if ( app.device.android ) {
        maps_schema = encodeURI('geo://?q=' + address);
        window.open(maps_schema, "_system");
    } else {
        maps_schema = encodeURI('maps://?q=' + address);
        window.location.href = maps_schema;
    }
}

Make sure you have these lines in your config.xml file:

<allow-intent href="maps:*" />
<access origin="maps:*" launch-external="yes" />

The lines below are "Android specific". It may cause conflict with iOS if you don't put them inside the <platform name="android> tag:

<platform name="android">
    <access origin="*" />
    <allow-navigation href="*" />
    ...
</platform>

Will Brickner · Answer 6 · 2017-02-24T22:23:29.763

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!

score 0 · Answer 7 · answered Jun 08 '20 at 09:15

0

Try this,

function openLocation() {
    window.open("https://www.google.com/maps/dir/'" + start_latitude + ',' + start_longitude + "'/'" + end_latitude + ',' + end_longitude + "'", '_system');
}

answered Jun 08 '20 at 09:15

Thushara Buddhika

1,652
12
14

score -2 · Answer 8 · edited Jan 20 '15 at 12:37

-2

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

edited Jan 20 '15 at 12:37

Pacotole

3
3

answered May 28 '14 at 20:12

Mark Kamyszek

398
2
5
15

3

on android, this opens a window that supersedes your app, with no way to close it, in order to get back to you app, you have to kill it and reopen. – Frank Conry Feb 03 '15 at 21:22

Android Phonegap - How to Open Native Google Maps Application

8 Answers8

Linked