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

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