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 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:

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.

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