A brief intro to the Google Maps reverse geocoder
Maps are becoming common place on many “Web 2.0″ websites and in some cases, you want user interaction relating to your maps. The following is just a brief overview of how to get the reverse geocoder working in your application, it does assume you get the basics of Javascript, the only things I explain are the geocoding functions (and establishing the base map for it to work off).
What is Reverse Geocoding?
Geocoding is the process of taking a human-readable address (eg. 123 Test Lane, Perth, Australia) and converting it into a set of latitude and longitude points, which can then be displayed on a map.
Reverse Geocoding, and this will come as a complete shock I know, is the opposite, taking a set of latitude and longitude points and converting them to a human-readable address.
It’s worth pointing out at this point that reverse geocoding is not 100% accurate! The Google system takes the points and tries to find the closest “addressable” location within a margin but it may not be the exact address you, or your user, asked for.
Using it
This is a just quick run through of the reverse geocoder, but I hope you get the idea of how to use it and the potential it has in applications you might be working on.
To start with, let’s get the Google Maps API:
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=YOUR API KEY"></script>You can get your API key by hitting up this address http://code.google.com/apis/maps/signup.html
Once you’ve got that, here’s the JS you’ll need, it’s in pieces and we’ll go through it function by function:
var map;
var geocoder;
var location;
function initialise() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-31.884463,115.79246), 13);
map.addControl(new GSmallMapControl);
GEvent.addListener(map, "click", getAddress);
}
The first thing we’re doing here is establishing the variables we’ll need for the code we’re using. It’s important to establish them out of function to ensure the other functions later on can pick them up (or so I’ve found when I’ve been working with it).
The initialise function establishes the map by grabbing the div on the page with the id “map” and setting it as the Google Map container. We then set the centre of the map to Perth, add a small map control and probably the most important line and the one you’ll need to do the reverse geocode - GEvent.addListener(map, "click", getAddress); - this line sets a listener going, waiting for a click to occur within the “map” div and when the click happens sets the function getAddress(); to work.
function getAddress(overlay, latlng) {
if (latlng != null) {
location = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
The getAddress(); function takes the map layer and latitude/longitude of the click location from your map and passes it to the geocoder.getLocations(); function which is built into the Google API. The reference to showAddress in there is the function that gets called next in the chain.
function ShowAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Couldn't find that location sorry :(");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
}
This code is the bit that does the frontend lifting. Here, if the status code returned by the API isn’t a 200 OK (see Myles article Response Code #FFFFF for more on Response Codes), or there is no response, we simply throw an alert with a sad face telling the user we failed to get a location from their request.
If it’s 200 OK, we start pulling apart the response, setting place to response.Placemark[0] which is the highest level of accuracy available for the request. Then we pull the latitude and longitude out by accessing place.Point.coordintates[x] where ‘x’ is 1 for latitude and 0 is longitude, to this day I’m not sure why they aren’t ordered the other way around (but then again, I haven’t looked hard for an explanation)…
Using the latitude and longitude data we establish a marker and set it on the map, opening an info window with the full address.
So that as a complete code block so you can copy and paste easily is:
var map;
var geocoder;
var location;
function initialise() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-31.884463,115.79246), 13);
map.addControl(new GSmallMapControl);
GEvent.addListener(map, "click", getAddress);
}
function getAddress(overlay, latlng) {
if (latlng != null) {
location = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function ShowAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Couldn't find that location sorry :(");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
}
And that ladies and gentlemen is the Google Maps API Reverse Geocoding function in all it’s glory. I’m working on some stuff now that uses it in a more practical setting and I’ll show that off a bit later (perhaps in the new year). You can get more information from the following links:
