Working with geolocation and the Google Maps Geolocation API

Working with geolocation and the Google Maps Geolocation API

With the advent of modern smartphones, location based services are already used by millions of people. So maybe you’re thinking about using geolocation data in one of your projects. However, although location based services are very “in” at the moment, there are still often enough scenarios where you do not necessarily need the current position of the user, but another, specific location.

Because I implemented such a mechanism in a recent project of mine, I decided to provide a short walkthrough of how I achieved this. I developed a small image gallery which allows me to upload photos and tag them (among other attributes) with a location. Basically, the user can choose one of two possibilities:

  • The current location
  • A specific, manually set location

Get your current location

All modern browsers (IE9+) and smartphone browsers support the HTML Geolocation API. This API provides a very simply way to get a user’s current location. Keep in mind, however, that the accuracy of this detection varies a lot by the device and services a user is using: a smartphone with GPS enabled will get a much better result than a laptop connected via WIFI. However, in my own (fairly unscientific) tests, I got a position only a few blocks away when connected to my home WIFI. For my purpose (and I guess for many others as well) this is more than accurate enough.

This one is very easy to implement. The following code will call a function “onPositionUpdate” when geolocation-support is detected and a position is located:

The function itself is very uncomplicated, too:

Now you can already do whatever you want with these coordinates. Please keep in mind that the browser will always ask the user for their permission to get the current location – users will have to give your website this permission, and there is nothing you can do about it. If a user (deliberately or unintentionally) declines permission for your website, location detection will not work! Sadly, a user would then have to dig in the browser settings to change this permission for your website, which is a quite high hurdle for most users.

While you will now have the (more or less exact) coordinates of the user’s current location, sometimes you will want to get some human-readable details about it – like the street name or simply the country. For this purpose, enter the Google Geocoding API!

While detailed information about this API can be found in the API docs, let me give a quick introduction. Basically, this API provides two things: You can get coordinates from an address (more on that later), or you can get an address from coordinates. There is no need for an API key or similar to use the Geocoding API, so you can basically start right away. Just be aware of the restrictions set by Google: You may only use the API for free if your web service is free of charge for end users and if you have a maximum of 2500 requests per day. Read the terms of use for further information about the licensing details.

To get a formatted address for two coordinates, you simply call the following URL via AJAX and parse the returned JSON-string:

That’s it! You can now display an address (with varying accuracy) to your user!

Getting a manually specified location

Maybe a user wants to upload photos he has shot elsewhere. In this case, getting his current location would not be helpful at all. Therefore, I added the possibility to enter an address manually. To be able to work with this address, it has to be converted to coordinates. Luckily, this sounds harder than it is: Again, the Google Geocoding API comes to your help and provides an extremely easy way to accomplish this.

Just take any address-string, URL-encode it and send it to the Geocoding API, like this:

Call this URL via AJAX, and again you will get a nice JSON result. A simple implementation with jQuery:

By checking the status, we can determine if any result has been found. If the API cannot find the specified address, it will return an error. If the status is “OK”, we can get the coordinates, and even a more accurate address. For example, if you search for “New York City”, the formatted address will return “New York City, USA”.

The great thing about this API is that it is intelligent enough to handle different address formats. You can search for street names, countries, cities, or combine them, just the way you can in Google Maps. In my tests, the API has always returned the right result set.

Wrap up

These scripts are very easy to implement. However, when done right, they can appear quite “magical” to end users. There are various scenarios in which this could be helpful: For example, if you want to enable users to enter their address, you could auto-complete them based on the results by the Geocoding API.

Just keep in mind that you cannot (or at least should not) use this API in commercial products – always reference the Terms of Service of Google to stay on the safe side!

For your interest, the page I used this in is The Trip – In the admin backend, you can specify the location a picture was shot at.

Francesco Novy

I'm a Web Developer from Innsbruck, Austria. I love to make things on the web. My passion is frontend development with HTML5, JavaScript and CSS. I strife for interoperability and usability as well as for modern and cross-browser UIs. My special focus lies on Mobile Web Apps.