This is a migrated thread and some comments may be shown as answers.

Launching external maps application

6 Answers 399 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 19 Mar 2013, 08:48 PM
I fooled around with my app and managed to get it to actually launch the maps application for both iOS and android.  However changing to cordova 2.4 (from 2.2) seems to have broken this and I don't see why, or a way around it.  Does anybody know how to get this to work?  Basically I need a link that can cause apple maps to launch on iOS and google maps to launch on Android.

Before I had to use a javascript method to set the window.location.href to a specific url and that would open the app the code looked something like this ...

var url = null, var query = "search string ..."
if (kendo.support.mobileOS.android) {
            // We are in android            
            url = "geo:" + item.latitude + "," + item.longitude + "?q=" + query;            
        } 
        
        if (kendo.support.mobileOS.ios) {
            // iOS 
            url = "http://maps.apple.com/?q=" + query;
        }        
        
        window.location.href = url;

Ever since I updated my app to the 2.4 version of cordova this no longer works (it launches the child browser plugin at google maps on both platforms).  Now  for android if I use an a element like this:
<a href="geo:0,0?q=dallas" data-rel="external">Dallas Link</a>

 

Following the link will work launch the google maps application.  However the same trick does not work for iOS (it will open google earth).  I have tried using something like <a href="http://maps.apple.com/?q=dallas" data-rel="external">link</a> but this will still launch the child browser plugin to that address (which gets redirected by apple to google maps).  How can I get the apple link to open the apple maps application and not the child browser plugin?

6 Answers, 1 is accepted

Sort by
0
Accepted
David
Top achievements
Rank 1
answered on 19 Mar 2013, 10:05 PM
Ok after a bit of messing around, it looks like this will work:
On iOS you can use the maps: uri scheme for apple maps, comgooglemaps: scheme for google maps (if it is installed, I am not sure what this does if it isn't installed).  On Android you can use the geo: scheme.  so what does this look like?

<a href="maps://?q=dallas" data-rel="external">iOS launch in apple maps</a>
<a href="comgooglemaps://?q=dallas" data-rel="external">iOS launch in google maps</a>
<a href="geo://0,0?q=dallas" data-rel="external">Android launch in google maps</a>

the 0,0 is the latitude and longitude, if you specify the real coordinates it helps the app determine which location to pick (i.e. if you are closer to Paris Texas than Paris France it will navigate to Texas if your coordinates indicate that.)

This is what I am doing for now, if someone knows of a better way please let me know (granted in my application I am binding the href to a observable field which will abstract the determination of which scheme to use, but you get the idea).
0
Kevin
Top achievements
Rank 1
answered on 06 Sep 2013, 09:24 PM
Just tried it and it works...thanks for this post and  solution...
0
David
Top achievements
Rank 1
answered on 06 Sep 2013, 09:52 PM
Glad it helped.  At some point I would like to find a way to determine if Googlemaps is on an iOS device and get the user to pick which maps application to use, but for now defaulting to apple maps seems to work well (no complaints from my users so far).
  -David
0
John
Top achievements
Rank 1
answered on 02 Oct 2013, 03:05 PM
What I can't understand is how can I make a link work for iOS and Android. I mean I figured out that geo: works for Android and comgooglemaps://? works for iOS.

But in my mobile website I want my link to open the google maps in iOS or in Android depending on the device the person is using.

When I put geo: doesn't work in iOS when I put comgooglemaps://? it doesn't work in Android. How to put both together?

Thanks.
0
Steve
Telerik team
answered on 02 Oct 2013, 03:14 PM
Hi John,

Two options:
  • You can use Cordova Device API, specifically device.platform to determine whether you're on iOS or Android and generate the link based on the platform.
    or
  • use Platform-Specific Files which in the process of building your app would get the specific file meant for the correct platform.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
John
Top achievements
Rank 1
answered on 02 Oct 2013, 03:21 PM
Thanks Steve,

Unfortunately this is too much for me. My html knowledges doesn't let me know how to use device.platform.

Unless it's something quite easy to explain how to implement don't bother.

Thanks any way.

Best regards,

John
Tags
General Discussion
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
John
Top achievements
Rank 1
Steve
Telerik team
Share this question
or