In this tutorial, we going to see how to get a city and state using zip code. I created a simple application using Google Maps Geocoding API. This API makes it possible for us to easily grab a city and state from zip code data entered in the form. First we need to know about geocoding, it is the process of getting the geographic coordinates (like latitude and longitude) from the addresses.

Google Maps Geocoding API

First, you need to get your own API key to utilize on Google Map API. You can get your own key from here. Once get your key, you will just add the key in code near YOURKEY.

   var YOUR_KEY = 'XXXXXXXXXXX';

The Geocoding API service is free up to 2,500 requests per day, which will be fine for most and additional costs past that if you need it are very reasonable. You can check out a cost estimator on their Pricing and Plans page.

Input Form:

Create a form with three fields zipcode, state and city.

JQuery Code - Get state and city

The following javascript code is used to get the state and city from zip code using Geocode Google Map API. On key up the zipcode from the form , the value from the zipcode passed to the maps.googleapis.com along with Your_key and get the json response and display in the city and state field.

var YOUR_KEY = 'XXXXXXXXXXX';
    $.ajaxSetup({ cache: false });
	var city = "";
    var state = "";

	
    $('#zip_code').keyup(function() {
      $zval = $('#zip_code').val();
 
      if($zval.length >= 5){
         $jCSval = getCityState($zval, true); 
      }
    });
  
  function getCityState($zip, $blnUSA) {
	 var date = new Date();
	 $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + $zip + '&key='+YOUR_KEY+'&type=json&_=' + date.getTime(), function(response){
	 
	 //Display JSON RESPONSE
	 $('#json_response').text(response.toSource());
         //find the city and state
	 var address_components = response.results[0].address_components;
	 $.each(address_components, function(index, component){
		 var types = component.types;
		 $.each(types, function(index, type){
			if(type == 'locality') {
			  city = component.long_name;
			}
			if(type == 'administrative_area_level_1') {
			  state_shortname = component.short_name;
			  state_longname = component.long_name;
			}
		 });
	});
	$('#city').val(city);
	$('#state').val(state_longname);
	
    });
  }

By Thirumani Raj posted on - 10th Oct 2017

Live Demo