In the last entry, I wrote about how we can use the navigator.geolocation API to find a user’s current location. In today’s post I’m going to continue on to talk about taking that location and turning it into a piece of human readable text that tells the user where they are.

After all, having a latitude and longitude is all well and good, but as humans we tend not to think that way. So, it would be quite nice to give the user a street address identifying their location. As it turns out, this is pretty easy – the Google Local Search API has this functionality baked in.

http://ajax.googleapis.com/ajax/services/search/local
    ?v=1.0
    q=lat,lon
    key=yourgoogleapikey

If you add your comma separated latitude and longitude to the structure above, Google will very helpfully return you back a load of data that tells you where it thinks you are:

{
    "responseData": {
        "results": [{
            …
            "title": "Kelly Langley…",
            "streetAddress": "Cowley Road, Cavendish House…",
            "city": "Cambridge",
            …
        }]
    }
}

This is only a chunk of the data that gets returned by Google, but hopefully it should be enough to give you a taste of what’s available. The obvious thing to do at this point is grab the street address, and maybe the city, and output them as a string to show the user. This is what Beer Near Me is currently doing.

One piece of data we haven’t used yet though is the accuracy data that is returned by navigator.geolocation.getCurrentPosition. You’ll remember from the last post that accuracy is measured in metres and shows the confidence that the browser has of the location it’s returned. So, if accuracy is given as 500, then the user might be anywhere within a half kilometre radius of the given location – not particularly accurate, and saying that they were on a specific street would be misleading. If, on the other hand, the accuracy given was 25 then the user would be expected to be within a 25 metre radius of the given location – pretty damn accurate.

So, what can we do with this? Well, if we’re not happy that the accuracy is good enough then we could tell the user they were “Somewhere in city” instead of simply showing them the street name of their location. On Beer Near Me, I could also stop the “Find me some beer” button from working until the accuracy was good enough.

So, that’s how I’m dealing with showing the user where they are in a nice human readable way on Beer Near Me – it’s pretty easy, right? In the next entry I’ll finish off talking about the navigator.geolocation API by putting the user’s location onto a static Google Map.

Tags: beer, geolocation, javascript

If you enjoyed this post, subscribe to The Code Train and read more when I write more.