Looking up ZIP Codes with Google’s API

A quick Google search for “look up by ZIP code” will reveal bunches of tools for doing the job. Mostly they’re ad sites, trying to offer you a small service in exchange for a click on something shiny. But there’s no need for that. You can build your own little look-up app with Google’s geocode API, and you don’t need to do anything fancy outside of a jQuery AJAX call.

Edit: Google’s API isn’t complete where counties are concerned. For example, this ZIP does not return a county. This kept my original script from being reliable, so I had to use a full ZIP/County list for my friend’s site. I’m also told (in the comment below) that you’re not supposed to use this outside of a Google Map. So you can use this post to learn the API and play around a bit, but use a map in Production.

Here’s an Example

You can see how this works and check out some page source with this demo. There’s not much to it, really. It’s an input with a button and some spans. I’m using jQuery’s on() method to attach a function to the click event, and the target items all have their own IDs.

The magic happens when we make an ajax() call (again with jQuery) to Google’s Geocode API. They have a fantastic resource here, where you can just grab the data in a handy JSON format. Once it returns the JSON object, it’s just a matter of walking through the object tree to get to the goodies you need.

But enough of my rambling. Let’s look at some code, so you can see how the call is put together.

Calling JSON with jQuery

Here’s an example of what you’d see if you just went to the url with a browser. As you can see, it’s just JSON. Keep in mind that although I used the ajax() method to do this, you can just as easily use jQuery’s getJSON() method.

// This gets the value of our input.
var ZIPCode = $('#zipCode').val();
	$.ajax({
		dataType: "json",
		url: 'http://maps.googleapis.com/maps/api/geocode/json?address=' +  ZIPCode + '&sensor=false',
		success: function (jsonData) {
			// Do stuff after the JSON arrives.
			console.log('Success!');

			//Let's make some variables to keep our code clean.
			var city =	jsonData.results[0].address_components[1].long_name;
			var county =	jsonData.results[0].address_components[2].long_name;
			var state =	jsonData.results[0].address_components[3].long_name;

			// Setting the target spans to the values we want to show.
			$('#ZIPCity').text(city.toString());
			$('#ZIPCounty').text(county.toString());
			$('#ZIPState').text(state.toString());
		}
	});
}

See? Not so bad at all! I didn’t really have to use the toString() method since it’s going to be changed into text when it hits the div, but I thought it would make things clearer. We’re going from an object to a string.

If you’re having trouble finding the stuff inside the JSON object, try sending it to the console as a string so you can look at it.

console.log(JSON.stringify(jsonData));

This sends everything, so you can see what you’re dealing with. Then you can start playing around with dots and brackets to walk down the object tree and get to the stuff you need. If you’re not interested in ZIP codes, there’s a bunch more available in the Google’s documentation.