Opening Native Map App from URL On Apple, Android, Windows Devices

Question

Does anyone have further details on how this would be done to handle multiple devices. I would like to target iPhone, Android, and Windows devices. According to this article, you can use different links. Any thoughts on how 3 different links should be used around on single element?

http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VYg3-flVikp

Answer 1

I usually do this:

var isiOS = (navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'));
var isAndroid = navigator.userAgent.match('Android');
var isWP = navigator.userAgent.match('Windows Phone') || navigator.userAgent.match('IEMobile');

if (isiOS){
    setTimeout(function () { window.location = siteURL; }, 25);     //fall back url
    $('body').append('<iframe style="visibility: hidden;" src="'+ appURI +'" />');

} else if ((isAndroid) || (isWP)){
    setTimeout(function () { window.location = siteURL; }, 25);     //fall back url
    window.location = appURI;

} else {    // if (isOtherPlatform)
    window.location = siteURL;
}

Note that on iOS, you can not determine if user has the map app installed or not. If you navigate to an app which the user has not installed would result in an ugly message complaining the absent of the target app. The workaround is to open that deep link in the iframe.

Also note that you should always redirect users to the web version of maps after some seconds to provide a smooth flow.