Search code examples
androidiphonemobilemobile-websiteios6

Need new method for linking to native mapping from mobile web app


My mobile web apps use a map link which automatically starts the mapping features of Android or iPhone by simply linking to "maps.google.com/maps?q=[something]". iOs 6 comes out, the links stop working, because Apple wants us to use "maps.APPLE.com". So now I have to specially detect iOs 6 and swap out links.

Is there a clean way to open the device/native mapping app from a mobile web app that works on Android, iOs 6, and iOs pre-6, since iOs 6 nerfed it?

Turns out ANYTHING you send to "maps.apple.com" gets forwarded to "maps.google.com"!

Both these links go to the same place

http://maps.google.com/maps?q=New+York

http://maps.apple.com/maps?q=New+York

Recently updated documentation on Apple dev site... http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Articles/MapLinks.html#//apple_ref/doc/uid/TP40007894-SW1


Solution

  • I tried this on my iPhone and maps.apple.com does launch the new Apple Maps app (however I only typed it into the address bar). When I followed the same link on my iMac using Chrome I was redirected to maps.google.com. I believe this is intentional on Apple's part. If you are targeting iPhones with iOS 6 then you'll want to switch from google.com to apple.com. It should be seamless.

    [CONFIRMED - this works on my iPhone with iOS 6.0 - I no longer have a iOS 5.x device to confirm that this redirects on a previous version of iOS. It does do the redirect in Safari, but it is broken in the iPhone Simulator]

    // javascript snippet to detect ipad/iphone OS version - these are notoriously fragile, use at your own risk :)
    function getOsVersion() {
    var osVersion = window.navigator.userAgent.match(/(ipad|iphone);\s+cpu\s.*os\s+([_0-9]+)/i);
    if (osVersion && osVersion.length === 3) {
        return Number(osVersion[2].replace('_', '.'));
    }
    
    return 0;
    

    }