Skip to content

Instantly share code, notes, and snippets.

@danharper

danharper/demo.md

Last active Jun 11, 2021
Embed
What would you like to do?
Open native Maps apps on iOS and Android in Cordova
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)
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');
}
@jakub-g

This comment has been minimized.

Copy link

@jakub-g jakub-g commented Aug 10, 2015

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

@jakub-g

This comment has been minimized.

Copy link

@jakub-g jakub-g commented Aug 10, 2015

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;
@juaquita21

This comment has been minimized.

Copy link

@juaquita21 juaquita21 commented Sep 11, 2016

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

@lfreneda

This comment has been minimized.

Copy link

@lfreneda lfreneda commented May 10, 2017

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

@bmonson

This comment has been minimized.

Copy link

@bmonson bmonson commented Aug 17, 2017

Thanks! Worked perfectly for my phonegap app.

@camarin24

This comment has been minimized.

Copy link

@camarin24 camarin24 commented Aug 30, 2017

Thanks! Worked perfectly.

@ShafiqShams

This comment has been minimized.

Copy link

@ShafiqShams ShafiqShams commented Dec 8, 2017

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 ?

@nvanheertum

This comment has been minimized.

Copy link

@nvanheertum nvanheertum commented Jan 8, 2018

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

@guillermo-medina

This comment has been minimized.

Copy link

@guillermo-medina guillermo-medina commented Apr 25, 2018

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.

@alexcode

This comment has been minimized.

Copy link

@alexcode alexcode commented Dec 4, 2018

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

@XiongLiding

This comment has been minimized.

Copy link

@XiongLiding XiongLiding commented Dec 27, 2018

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

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

@lfreneda, @guillermo-medina

@hoodasaad

This comment has been minimized.

Copy link

@hoodasaad hoodasaad commented Mar 28, 2019

It works for me ,,, Thanks

@ppkantorski

This comment has been minimized.

Copy link

@ppkantorski ppkantorski commented May 8, 2019

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?

@davidtoledo

This comment has been minimized.

Copy link

@davidtoledo davidtoledo commented Dec 18, 2019

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:*" />

@erumhannan-techlogix

This comment has been minimized.

Copy link

@erumhannan-techlogix erumhannan-techlogix commented Apr 16, 2020

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

@rafal-r

This comment has been minimized.

Copy link

@rafal-r rafal-r commented Jul 3, 2020

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");
}
@eh2001

This comment has been minimized.

Copy link

@eh2001 eh2001 commented Sep 7, 2020

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

@manujbahl

This comment has been minimized.

Copy link

@manujbahl manujbahl commented Sep 7, 2020

can ios map be show without the pin?

@NicolasBehra

This comment has been minimized.

Copy link

@NicolasBehra NicolasBehra commented Jan 4, 2021

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

This comment has been minimized.

Copy link

@JstnPwll JstnPwll commented Jan 11, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment