Google Place Autocomplete for Postal Code

Question

I'm trying to create an autocomplete text box which should only provide the postal code. Here is the documentation which I have followed: https://developers.google.com/places/webservice/autocomplete#place_types

JSFiddle working example is here

If I'm using the postal_code its not working for me, but when I'm using the cities its fine. What should I do for achieving an autocomplete with only postal codes?

function postal_code() {   var input = document.getElementById('field-postal');   var options = {     types: ['(postal_code)'],     componentRestrictions: {       country: "in"     }   }   var autocomplete = new google.maps.places.Autocomplete(input, options); }  google.maps.event.addDomListener(window, 'load', postal_code); 

Answer 1

The documentation isn't very clear.

• the (regions) type collection instructs the Places service to return any result matching the following types:
  • locality
  • sublocality
  • postal_code
  • country
  • administrative_area_level_1
  • administrative_area_level_2

• '(postal_code)' won't work (that is incorrect).
• 'postal_code' doesn't work either.
• '(regions)' works and includes postal_code type results

Answer 2

I used postal_code address component type.

Make sure you included the places library in your script url as:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBbt5ueucPc0u9VQDb8wFvFigV90PpTQA&libraries=places&callback=initEditClntInfoAutoComplete"    async defer>  </script> 

Working Example

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete 

////////// PART FROM MY WORKING CODE
////////// Replace getByElementId with your form input IDs

  ////  Global Vars    var  editClntInfoAutocomplete, addrStreet ="",        addressComponets = {                     street_number: 'short_name',                     route: 'long_name',                     locality: 'long_name',                     administrative_area_level_1: 'short_name',                     country: 'long_name',                     postal_code: 'short_name'        };  function initEditClntInfoAutoComplete() {   // Callback          editClntInfoAutocomplete = new google.maps.places.Autocomplete(             /** @type {!HTMLInputElement} */(document.getElementById('clntInfoEditAddr1')),             {types: ['geocode']});          // When the user selects an address from the dropdown, populate the address         // fields in the form.         editClntInfoAutocomplete.addListener('place_changed', fillInEditClntInfoAddress);     }      function fillInEditClntInfoAddress() {          var place = editClntInfoAutocomplete.getPlace();                      clearPrevEditFrmAddrVals();          for ( var i = 0; i < place.address_components.length; i++) {                var addressType = place.address_components[i].types[0];                if (  addressComponets[addressType] ) {                     var val = place.address_components[i][addressComponets[addressType]];                                       assignEditFrmAddrFieldsVal(addressType, val );               }           }             if( addrStreet != "")                  document.getElementById("clntInfoEditAddr1").value = addrStreet;       }       function assignEditFrmAddrFieldsVal( addressType , val ) {              switch( addressType ) {                 case "administrative_area_level_1":                         document.getElementById("clntInfoEditState").value = val;  break;                 case "locality":                     document.getElementById("clntInfoEditCity").value = val;  break;                 //   case "country":                 //        document.getElementById("addressType").value = val;  break;                 case "postal_code":                     document.getElementById("clntInfoEditZip").value = val;  break;                   case "street_number":                  case "route":                          addrStreet += " "+val;      break;              }       }       function clearPrevEditFrmAddrVals(){          var editClntFrmAddrIDs = ["clntInfoEditState","clntInfoEditCity","clntInfoEditZip","clntInfoEditAddr1"];              addrStreet = "";           for( var frmID in editClntFrmAddrIDs )               wrap(editClntFrmAddrIDs[frmID]).val("");      }