Tutorial #24
Geocoding with Google Maps Intermediate   2013-11-20


The standard way to use the Google Maps or Bing Maps web sites is to enter an Address and then explore a map that has a Marker at that location. Behind the scenes, the software is looking up that address, fetching its Latitude and Longitude coordinates and using those to center the map that you see. This process is called Geocoding.

We can use Geocoding directly to get the Lat Lon pairs for various purposes. We can use them to display multiple points on our maps. We can calculate the distance between two locations and we can identify other points that lie within a given radius of a target point.

Google and Bing both provide an API interface to their geocoding services. You might access this from a server application or from the client's browser, depending on how you want to work with the data.

You can also do the reverse - enter a Latitude, Longitude coordinate pair and get the Address of the nearest structure. This, not surprisingly, called Reverse Geocoding.

In this tutorial I will build a web page that demonstrates both modes, using data that you enter into a form.

Demo 1 screenshot for this tutorial

Understanding the Code

The code block starts out with the HTML for the two input text boxes, each with unique IDs, followed by empty span tags into which we will place the results of geocoding.

Next we load the Google Maps API JavaScript, using your own API key.

The main script uses jQuery to simplify event handling and places everything in a ready function that executes on page load.

Within this we define a google.maps.Geocoder object and then define two event handlers using the jQuery on function.

The first of these implements regular Geocoding. When the DOM element with the id of address_in changes then the callback function is called.

This calls the geocoder.geocode function with a key:value pair where the key is address and the value is the text contained in the address_in text input box.

The geocoder.geocode call is also passed a callback function which processes the results sent back from Google. If the status is good then the Latitude and Longitude values are extracted from the first element in the results array and written into the placeholders on the web page.

The code for Reverse Geocoding is very similar. First, we extract the Latitude and Longitude values entered into the text box and create a google.maps.LatLng.

In geocoder.geocode call, the key:value pair has latLng as the key and the latlng as the value. The key determines whether the call is for 'forward' or reverse geocoding.

The results array returned by reverse geocoding contains the address of the nearest known location and that is accessed with the formatted_address attribute. The first element in the results array is the most detailed. results[1] etc are increasingly less specific - i.e. higher indices contain just the city or state, etc.

Reverse geocoding will give you the closest address, but for some cases this may not be meaningful - for example if you give the Lat Lon pair in the middle of a lake. Use the function with care.

Take the Lat Lon pair returned from forward Geocoding and try placing a marker on a Google map using the code in Tutorial 15

For more information take a look at Google's Geocoding Service documentation.

Code for this Tutorial

Share this tutorial

Related Tutorials

15 : Display a Google Map using JavaScript   (Intermediate)

19 : Geolocation in HTML5   (Intermediate)

Comment on this Tutorial

comments powered by Disqus