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.

Update: geo-autocomplete has been rebuilt upon the jQuery UI framework, as a UI Widget rather than a jQuery plugin, with more powerful options for customization.

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.

This entry was posted in mobile geo social and tagged , , , , , , , , , . Bookmark the permalink.
  • http://www.college-paper.org/ college paper

    As someone new to GeoMeme, I appreciate every piece of information I can get. Thanks for the insights.

  • http://www.zemelapiai.info/ Viktoras

    Dude it's amazing

  • Viktoras

    Is it possible to include the marker and infowindow to this map?

  • Pingback: Scalable, fast, accurate geo apps using Google App Engine + geohash + faultline correction | mobile geo social

  • Blogingas

    How to get a full version of geo-autocomplete?

  • Pingback: DANA

  • Pingback: Google Instant on your Maps | mobile geo social

  • http://www.42ndstreetoffices.com/penn-station-office-suites www.42ndstreetoffices.com

    Wow that is so cool!

  • Gurumurthy Sundar

    Hi –
    I was wondering if it’s possible to integerate Maps API v2 (instead of v3) with your use of jQuery for the autocomplete feature. And instead of using the geocoding service after each keystroke, maybe use it after a certain delay in user typing the keywords. I would very much appreciate your response. Thanks, Sundar

  • Gurumurthy Sundar

    Hi –
    I was wondering if it’s possible to integerate Maps API v2 (instead of v3) with your use of jQuery for the autocomplete feature. And instead of using the geocoding service after each keystroke, maybe use it after a certain delay in user typing the keywords. I would very much appreciate your response. Thanks, Sundar

  • http://security-wire.com/01/how-to-remove-antivirus-net-rogue-anti-spyware.html remove Antivirus .NET

    I always like Google map. It’s really useful:)

  • Anonymous

    You have some interesting thoughts! Perhaps we should contemplate about attempting this myself.
     

  • Anonymous

    You have some interesting thoughts! Perhaps we should contemplate about attempting this myself.
     

  • http://www.mspy.com/ Adele

    As far as i have read, “Google Static Maps API v2″ is not part of “Google Maps API v2/v3″, it’s a separate API. So it is used also with Google Maps API v3. Haven’t worked with it though.

  • http://www.mspy.com/ Adele

    As far as i have read, “Google Static Maps API v2″ is not part of “Google Maps API v2/v3″, it’s a separate API. So it is used also with Google Maps API v3. Haven’t worked with it though.

  • anita ommer

    I can see that you are putting a lot of time and effort into your site

    and detailed articles! I am deeply in love with every single

    piece of information you post here.

  • anita ommer

    I can see that you are putting a lot of time and effort into your site

    and detailed articles! I am deeply in love with every single

    piece of information you post here.