Open native Maps apps on iOS and Android in Cordova

demo.md

iOS (with pin, iOS will lookup address too and show that as label)

maps://?q=LAT,LNG

Android, no pin (just open at location)

geo:LAT,LNG

Android, with pin

geo:0,0?q=LAT,LNG

Android, with pin, with custom label

geo:0,0?q=LAT,LNG(LABEL)

example.js

var geocoords = lat + ',' + lng;

if (iOS) {
  window.open('maps://?q=' + geocoords, '_system');
}
else {
  var label = encodeURI('7 East Street'); // encode the label!
  window.open('geo:0,0?q=' + geocoords + '(' + label + ')', '_system');
}

Helped me a lot with the ios version, thanks! The official docs nor online resources do not mention maps:// solution.

In addition, one may use &z=INTEGER to set a zoom level, or use window.location instead of windows.open. It's important to note that the label is part of q param and if you want to use zoom, put &z at the end like below:

      window.location = "geo:0,0?q=" + coords + '(' + label+ ')&z=' + zoomLevel;

Hello danharper. Can you upload a complete and simple example? I would be grateful. Thank you very much!!

danharper window.open('maps://?q=' + geocoords, '_system'); is not working here. Any tips?

Thanks! Worked perfectly for my phonegap app.

Thanks! Worked perfectly.

window.open('maps://?q=' + this.patadd + '&saddr=' + lat + ',' + lng + '&daddr=' + this.lat + ',' + this.lng, '_system');

This code is not opening native maps in my iphone.
Any idea ?

You guys have any idea if this is possible with a callback to original app when arrived?

Facing the same problem. I can not get the maps app opened:

• maps://?q=vLat,vLng&z=10

I was able before but for some reason is not working.

@guillermo-medina, I succeded with maps://?ll=${latitude},${ongitude}&address=${addressString}&dirflg=d

For those who faild to open map, try add this line in your config.xml

<allow-intent href="maps:*" />

@lfreneda, @guillermo-medina

It works for me ,,, Thanks

Hey, im doing something like this:

<a href="maps:*" onclick="window.open('maps://?q=' + detail.location?.latlng, '_system', 'location=yes'); return false;">

however the maps app opens but is not redirected to the location. ive even tried manually entering the lat and long but with no luck. all it does is open maps. I also added

<allow-intent href="maps:*" />

to the config.xml file. Can someone please comment in on what might be going wrong?

If you just want to open the native Maps App, here is a simple solution:

function openNativeMapsApp(address) {
var maps_schema = encodeURI('maps://?q=' + address);
window.open(maps_schema, "_system"); // Use this for Android
window.location.href = maps_schema; // Use this for iOS
}

Make sure you have this in your config.xml file:

<allow-intent href="maps:*" />

Hi i tried above mentioned solution.
step1. window.open("comgooglemaps://?q=" + location + "(" + address + ")", "_system");

step2: window.open("maps://?daddr=" + location, "_self");

step3: window.open("maps://?qaddr=" + location, "_self"); // tried earlier did not work

step4: window.location.href = "maps://?q="+lat+","+lng;

added but still no luck, its not opening any map in emulator. iphone 8 plus 13.3
already set block-popups in safari settings --- NO

Hi,
I was also struggling with this approach and finally found that you need to have InAppBrowser installed:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

if (window.device.platform === "iOS") {
            cordova.InAppBrowser.open(`maps://?q=${w.lat},${w.lng}`, "_system");
} else {
     cordova.InAppBrowser.open(`geo:0,0?q=${w.lat},${w.lng}(${w.name})`, "_system");
}

Note to whoever in iOS getting unsupported url error after using maps:// and added allow-intent href="maps:*", please remove allow-navigation href="*" setting in config.xml

can ios map be show without the pin?

I you want it to work both on waze and maps, use:

    const lng = 42.00000;
    const lat = -0.001;
    const geocoords = lat + ',' + lng;
    const label = encodeURI('7 East Street'); // encode the label!
    window.open('geo:' + geocoords + '?q=' + geocoords + '(' + label + ')', '_system');

Note to whoever in iOS getting unsupported url error after using maps:// and added allow-intent href="maps:", please remove allow-navigation href="" setting in config.xml

Thanks for this.

For the Android part to work, make sure to add <allow-intent href="geo:*" /> to the Android section of config.xml. I didn't need to do this with "maps:*" for iOS but I added it anyway just in case.

@rafal-r At least with the latest Cordova it's not necessary to have inappbrowser installed (confirmed working without it):

"cordova-android": "^9.1.0",
"cordova-ios": "^6.2.0",
"cordova": "^10.0.0",

Here's what works for me:

const query = "53.723337, -69.995790";
if (ios) {
  window.location.href = encodeURI(`maps://?q=${query}`);
} else if (android) {
  window.open(encodeURI(`geo:0,0?q=${query}`), "_system");
}

working solution form @ fortinmike

but for me works only if I added <allow-intent href="maps:*" />

works! but how to select a location and bring the coordinates back to Cordova app?

For the Android part to work, make sure to add <allow-intent href="geo:*" /> to the Android section of config.xml. I didn't need to do this with "maps:*" for iOS but I added it anyway just in case.

@rafal-r At least with the latest Cordova it's not necessary to have inappbrowser installed (confirmed working without it):

"cordova-android": "^9.1.0",
"cordova-ios": "^6.2.0",
"cordova": "^10.0.0",

Here's what works for me:

const query = "53.723337, -69.995790";
if (ios) {
  window.location.href = encodeURI(`maps://?q=${query}`);
} else if (android) {
  window.open(encodeURI(`geo:0,0?q=${query}`), "_system");
}

This worked for me!! 2024 Cordova android