Fast map re-location using Google Static Maps v2 + geocoder

GeoMeme is a pet project of mine. It’s a web app, and also a mobile web app for iPhone and Android, that measures real-time local twitter trends.

Visitors to GeoMeme choose a location on the map, and two search terms to compare. GeoMeme then measures and compares the number of matching tweets within the bounds of the map, based on public data from a number of mobile twitter apps.

As an example, GeoMeme can work out that ‘District 9′ beats ‘Inglorious Basterds’ in Manhattan.

As well as offering users the normal pan and zoom controls to move the map around, GeoMeme also introduces an innovative geo-autocomplete control which is powered by the geocoder service from Google Maps v3 API and the new Static Maps v2 API.

This blog post shares some details of how the geo-autocomplete control works, and offers some code so you can build your own geo-autocomplete controls.

1. Based on a partial location typed by the user, obtain a list of possible matching locations:

If the user has already typed ‘San’ into a form field, we can obtain a list of possible matching locations by passing this partial location to the geocoder service from Google Maps v3 API, as follows:

var partial_location = document.getElementById("location").value;
var geocoder = new google.maps.Geocoder();

geocoder.geocode({'address': partial_location}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        document.getElementById("results").innerHTML = '';
        for (var i = 0; i < results.length; i++) {
            showResult(results[i]);
        }
    } else {
        document.getElementById("results").innerHTML = 'Geocode was not successful for the following reason: ' + status;
    }
});

function showResult(result) {
    document.getElementById("results").innerHTML += 'It could be: ' + result.formatted_address + '<br/>';
}

2. Decorate these possible matching locations with a Static Maps thumbnail to help the user choose the right one:

The geocoder returns more than just a formatted address. The full response is a JSON object of the following form:

results[]: {
    types[]: google.maps.GeocoderLocationType,
    formatted_address: String,
    address_components[]: {
        short_name: String,
        long_name: String,
        types[]: String
    },
    geometry: {
        location: LatLng,
        location_type: String,
        viewport: LatLngBounds,
        bounds: LatLngBounds
    }
}

geometry.viewport represents the recommended viewport for each returned result, from which we can derive the required Static Maps URL, as follows:

function showResult(result) {
    var src = 'http://maps.google.com/maps/api/staticmap';

    // the visible parameter specifies one or more locations
    // to show on the map. so we need to specify the south-west
    // and north-east corners of geometry.viewport
    src += '?visible=' + result.geometry.viewport.getSouthWest().toUrlValue() + '|' + result.geometry.viewport.getNorthEast().toUrlValue();

    // other parameters as per http://code.google.com/apis/maps/documentation/staticmaps/#URL_Parameters
    src += '&size=100x100&maptype=terrain&key=YOUR_API_KEY&sensor=false';

    document.getElementById("results").innerHTML += '<img src="' + src + '" /> ' + result.formatted_address + '<br/>';
}

Working out the required Static Maps URL is now a much simpler task with v2 of the Static Maps API, because there is no longer any need to manually calculate a zoom level or latitude / longitude span values.

You can see this working on GeoMeme by clicking on the location control at the top of the screen and entering a partial location. When you choose from the list of possible matches, the main map is moved to that location, providing a refreshingly quick way for users to re-position the map.

You can also download a hello world example here, built as a jQuery plugin to work with a modified version of the excellent Autocomplete plugin:

Using this geo-autocomplete plugin is recommended because it includes a number of features which protect the geocoder service from being hit too often. Including; waiting for keystrokes to stop before sending a request to the geocoder, waiting for a minimum number of characters to by typed, and caching geocoder responses to avoid duplicate requests. Options are also available to set the size and maptype of the Static Map thumbnails.

Enjoy!

This post is one of a series that aims to share some of the technology innovation that can be found in GeoMeme. Other posts cover topics such as location-aware mobile web apps using Google Maps v3, and scalable geo apps using Google App Engine.