Building a town/country picker using Google’s Geocoding API and jQuery

I’m currently working on a new “social” site for a startup and when building some of the forms, one of the bits of information we need to collect from users is their country and town or city. Nothing really new, but I didn’t want to build an enormous dropdown with every country in the world and then leave the city/town bit as a simple text input. In this case the possibility of building a city/town dropdown based on the choice of country just seems nonsense.

So I then remembered how Facebook does it. They give you a simple input field and as you start typing it will show a list with options of places matching the string you’ve typed so far. You then select the desired location from the list and voila. Neat.

So now I wanted to implement something like this as a jQuery plugin. The first question I needed to ask myself is “were do I get the data from?”. I needed to be able to send off AJAX requests to some resource that searches for a given term and returns possible “places”. This is where Google’s Geocoding API comes in. The geocoding API supports JSON output, which is very handy, but we still have the problem of “same domain policy” for XHR requests. To work around this I suggest using a simple “proxy” type script on the server side to issue the requests to Google on behalf of the browser. Doing this we query our own domain for the searches and avoid cross-domain issues. Checkout the demo for a working example and the “proxy” script used by the demo on GitHub.

The plugin is still work in progress but you can check (and fork) the code on GitHub. I hope someone will find it useful when trying to build the same kind of user experience.

Feedback, bug fixes and new features welcome.