Create a "Give me directions" button using jQuery and HTML5 Geolocation

17 May 2013, Danny Connell

An upcoming mobile website required the inclusion of a "Give me directions" button. I.E. a button that the mobile user can click to see directions from their current location to a given destination.

Here is my simple custom solution.

View demo page | Download demo page

HTML

Firstly, I added a button to the page for the user to click:

<a href="#" class="get-directions">Give me directions to Reading Room Manchester</a>

JavaScript

I included jQuery, and began by creating variables for the starting location and destination:

$(document).ready(function() {

var startingLocation;
var destination = "reading+room+manchester"; // replace this with any destination

});

Next I attach a click event to my button:

$('a.get-directions').click(function (e) {

});

Within this click function, I use HTML5 geolocation to calculate the user's latitude and longitude, combine these two values into a string, and send the starting location and destination to a function:

// check if browser supports geolocation
if (navigator.geolocation) {

// get user's current position
navigator.geolocation.getCurrentPosition(function (position) {

// get latitude and longitude
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
startingLocation = latitude + "," + longitude;

// send starting location and destination to goToGoogleMaps function
goToGoogleMaps(startingLocation, destination);

});

}

Finally, within the goToGoogleMaps function, I send the user to Google Maps, along with the query needed to get the directions:

// go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
function goToGoogleMaps(startingLocation, destination) {
window.location = "https://maps.google.co.uk/maps?saddr=" + startingLocation + "&daddr=" + destination;
}

Fallback for browsers without Geolocation

What if the user's browser doesn't support Geolocation? Or they selected 'no' to the prompt asking to use their location? I wanted it to still work. Upon clicking the button, the user would be presented with a warning, along with a text input. The user could then manually enter their postcode, click the button and still get directions.

Here is the HTML for the warning and input (this is hidden by default in the CSS):

<div class="no-geolocation">
<p class="warning">Your browser does not support Geolocation. Please enter your postcode and click the button again.</p>
<input type="text" placeholder="Enter postcode or address" class="manual-location">
</div>

And here is the JavaScript for the fallback:

// get manually entered postcode
startingLocation = $('.manual-location').val();

// if user has entered a starting location, send starting location and destination to goToGoogleMaps function
if (startingLocation != '') {
goToGoogleMaps(startingLocation, destination);
}
// else fade in the manual postcode field
else {
$('.no-geolocation').fadeIn();
}

View demo page | Download demo page

5 Comments...

  1. Cyril Celestine 7 August 2013 at 3:49pm said:

    This was exactly what I needed. Been fighting with this for 2 day.
    Thanks

  2. Tim Reenan 20 September 2013 at 10:27am said:

    Great illustration - one question (and bear in mind I am completely new to javascript and jQuery):
    My mobile site dynamically creates multiple rows from a JSON return array from a PHP MySQl query which works perfectly.
    So, I want to be able to have something like:-
    Give me directions to RG14 1AA
    Give me directions to RG14 6QA
    Give me directions to ...

    and pass in the postcodes to the function such that "var destination" gets set dynamically.

    Any help would be gratefully received.
    Cheers.

  3. Just to let you guys know this does not work on chrome browser on android.

  4. Help! love the script, doesn't work in IOS7 / Safari on the iPhone

  5. thank you so much! this is perfect! i am having issues using this on ios devices however.

    I dont suppose you know of a work around at all?

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>