CODEWITHSUNDEEP
javascriptandroidiosgoogle-maps
TheRealPapa
TheRealPapa

Reputation: 4539

Web app to launch google maps directions from link using lat & long

I have found the following link showing how to create links to launch navigation from a web app.

My JS code is:

// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
    if (found) {
        // Detect type of device to prepare URL for map directions
        switch(true) {
            case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:?saddr=Current Location&daddr=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:' + $('#address1').val() + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'bingmaps:?where=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/android/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'geo:' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = "javascript:blackberry.launch.newMap({'address':{'address1':'" + $('#address1').val() + ' ' + $('#address2').val() + "','city':'" + $('#city').val() + "','country':'" + $('#country_id option:selected').text() + "','stateProvince':'"  + $('#state').val() + "','zipPostal':'" + $('#postcode').val() + "'}})";
                break;
            default:
                var directionsUrl = 'http://maps.google.com?q=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
        }
        $('#directions-button').attr('href', directionsUrl);
        $('#directions-button').prop('disabled', false);
    } else {
        $('#directions-button').attr('href', '#');
        $('#directions-button').prop('disabled', true);
    }

}

I call the above function after the Google Map resolves the address like so (for successful map address geocoding):

directionsButton(true);

I would like to achieve the above for each browser / OS but using lat/long instead of address. I cannot to find the url structure examples for this.

thank you for any help.

Upvotes: 0

Views: 454

Answers (1)

Spider IT
Spider IT

Reputation: 81

First, most of your code only shows the location on the map, not the navigation to that location. I've changed this in the code below.

Now to your question. The following isn't tested on all the devises, but is according to the respective documentation. It assumes you have an input with id="lat" and one with id="lng":

// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
    if (found) {
        // Detect type of device to prepare URL for map directions
        switch(true) {
            case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'https://maps.google.com/?saddr=Current+Location&daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'ms-drive-to:?destination.latitude=' + $('#lat').val() + '&destination.longitude=' + $('#lng').val();
                break;
            case (/android/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'google.navigation:q=' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = "javascript:blackberry.launch.newMap({'nav_end':{'latitude':" + $('#lat').val() + ",'longitude':" + $('#lng').val() + "}})";
                break;
            default:
                var directionsUrl = 'https://maps.google.com?daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
        }
        $('#directions-button').attr('href', directionsUrl);
        $('#directions-button').prop('disabled', false);
    } else {
        $('#directions-button').attr('href', '#');
        $('#directions-button').prop('disabled', true);
    }
}

Documentation used:

For Windows Phone 7 I can't find the documentation anymore, it's old code. Android and desktop (default:) are tested.

Upvotes: 2

Related Questions