I have been implementing some native mobile mapping in our new product Workify which employs a mobile UI for travelling Staff which enables them to map and get directions to a specific job that’s been assigned to them.

After many hours of exploring the best way to do this which would make Windows Phone, Android and Apple IOS open their native mapping app from within our mobile HTML5 UI I found a fantastic article from John Allan where he’s done a lot of the leg work already in exactly what is need for each Operating System:

Opening Native Map Apps From The Mobile Browser

While this points me in the right direction on what is needed for each mobile operating system let’s take it a step further and do some PHP-side detection and then present the right native link for the specific device.

function getbrowser () {
    //return $_SERVER['HTTP_USER_AGENT'];
    //if ( preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
    if ( preg_match('/(windows phone)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "wp7";
    }
    if ( preg_match('/(android)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "android";
    }
    if ( preg_match('/(iphone|ipod|ipad)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "ios";
    }
    if ( preg_match('/(wap)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "mobile";
    }
    if ( preg_match('/(opera)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "opera";
    }
    if ( preg_match('/(windows)/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) {
        //android
        return "windows";
    }
    return "unknown";
}

function createNativeMappingLink($address) {
    //this function detects the type of browser/mobile device being used and customises the map link so it launches the native browser
    $ci = get_instance();
    $browser = $ci->session->userdata('browser');
    switch ($browser) {
        case "wp7":
            $address = str_replace(" ","+",$address);
            $maplink = "<a href="maps:$address">";
            break;
        case "android":
            //sanitise
            $data = array("q"=>"$address");
            $querystring = http_build_query($data);
            $maplink = "</a><a href="http://maps.google.com/maps?$querystring" target="_blank">";
            break;
        case "ios":
            //new apple 
            $data = array("q"=>"$address");
            //sanitise 
            $querystring = http_build_query($data);
            $maplink = "<a href='http://maps.apple.com/?$querystring' target='_blank'>";
            break; 
        default: 
            //return the default google maps link for unknown devices
            $data = array("q"=>"$address");
            //sanitise 
            $querystring = http_build_query($data);
            $maplink = "<a href="http://maps.google.com/maps?$querystring" target="_blank">";
            break;
     }
return $maplink;
}

Now this was written for CodeIgniter but really the only two lines you’ll have to change if you are using plain old PHP are the:

    $ci = get_instance();
    $browser = $ci->session->userdata('browser');

to obtain the browser string.

Happy mapping!
TheNinja.