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.



Categories: Uncategorized
  • Abhijit Bhole6187

    i want to search nearest atm for that i have used google places api i have generate my returns me different information eventhough my url is correct,73.874889&radius=500&type=atms&sensor=false&key=AIzaSyDVp-sX4iOERcxYgBBU6IG8rDLfwlwErSYi want to search it without hardcoding is it work in india ….?please tell me is google place api work in india ……? please tell me the solutionthank you abhijit bhole

    • lupomontero

      Abhijit, note that this example is using Google’s Geocoding API – – and most importantly in “JSON” format. The link you sent is using the “places API” – – and xml output, so parsing it will be very different.

      To make it work for “places” you will need to change the proxy.php script to query the “places” API and then the jQuery plugin as well to parse and handle the different result objects returned by the API.

  • Dave

    Hey Lupo..

    I am not sure why but I cannot get the demo to operate correctly. All I am getting is an infinite loading gif. Hmm..

    • lupomontero

      Hmmm… not sure what the problem could be. I just tested it in a few browsers and seems to work. Are you getting any JavaScript errors? What browser/platform are you using?

  • mithil

    Ya the demo does not seem to be working right. I entered “Sacra” trying to find “Sacramento” and it gave only one option “Monterrery, NL,MX”. No where near what I searched.


    • lupomontero

      Note that Google’s geocoding api is responsible for suggesting locations, and im not printing the “whole” location so the matched may not be obvious. If you carry on typing the location you want to find at some point it should suggest a useful location 😉