Launching external maps application

7 posts, 1 answers
  1. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 19 Mar 2013 Link to this post

    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?
  2. Answer
    David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 19 Mar 2013 Link to this post

    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).
  3. Kevin
    Kevin avatar
    1 posts
    Member since:
    Sep 2013

    Posted 06 Sep 2013 Link to this post

    Just tried it and it works...thanks for this post and  solution...
  4. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 06 Sep 2013 Link to this post

    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
  5. John
    John avatar
    2 posts
    Member since:
    Oct 2013

    Posted 02 Oct 2013 Link to this post

    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.
  6. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 02 Oct 2013 Link to this post

    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.
  7. John
    John avatar
    2 posts
    Member since:
    Oct 2013

    Posted 02 Oct 2013 Link to this post

    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
Back to Top