Google Place Autocomplete for Postal Code

问题

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);

回答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

回答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("");
     }

回答3:

I know this is a little old but... I thought I should share my knowledge and hope it helps someone.

@geocodezip is right, you can't specifically request Google to return only postcode results. However, you can request regions and tell the user when they've messed it all up!

This is the code I use. It uses 2 inputs; an address prefix (house name/number) and postcode

Requirements:
A div with 2 inputs (for searching).
Below that, a div container which contains inputs with the below id's: (these can be prefixed)

Address1
Address2
City
County
Postcode
Country

Each of my user inputs has the class "InputControl", so I use this in my function to clear previous values.

Using it

var autoAddr;

function initAutocomplete() {
    autoAddr = new google.maps.places.Autocomplete(document.getElementById('AddressSearchField'), { types: ['(regions)'] });
    autoAddr.addListener('place_changed', FillInAddress);
}
function FillInAddress() {
    GooglePlacesFillAddress(autoAddr, "#AddressCont", "");
}

The main function

function GooglePlacesFillAddress(Place, ContainerId, AddressPrefix) {
    var
        place = Place.getPlace(),
        arr = ['premise', 'route', 'locality', 'postal_town', 'administrative_area_level_2', 'postal_code', 'country'],
        dict = {},
        adr = $(ContainerId).find("#" + AddressPrefix + "Address1"),
        switched = false,
        switchedAgain = false,
        searchAgain = $("<p id=\"" + AddressPrefix + "AddressSearchAgain\"><a href=\"javascript:void(0)\" class=\"Under\">I would like to search again</a></p>"),
        asc = $("#" + AddressPrefix + "AddressSearchCont"),
        adressPrefixValue = $("#" + AddressPrefix + "AddressSearchPrefixField").val().trim();

    SlideShow(ContainerId),
    $(ContainerId).find("input.InputControl").val(''),
    asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").attr("disabled", "disabled"),
    asc.find("#" + AddressPrefix + "AddressSearchFieldButton").addClass("disabled"),
    asc.find("#" + AddressPrefix + "AddressSearchPrefixField").after(searchAgain),
    searchAgain.on("click", function () {
        $(this).remove(),
        asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").removeAttr("disabled").val(''),
        asc.find("#" + AddressPrefix + "AddressSearchFieldButton").removeClass("disabled"),
        asc.find("#" + AddressPrefix + "AddressSearchPrefixField").focus();
    });

    if (place.address_components && place.address_components.length)
        for (var i = 0; i < place.address_components.length; i++)
            for (var j = 0; j < place.address_components[i].types.length; j++)
                if ($.inArray(place.address_components[i].types[j], arr) >= 0)
                    dict[place.address_components[i].types[j]] = place.address_components[i]["long_name"];

    $(ContainerId).find("#" + AddressPrefix + "City").val(dict["postal_town"] || '');
    $(ContainerId).find("#" + AddressPrefix + "County").val(dict["administrative_area_level_2"] || '');
    $(ContainerId).find("#" + AddressPrefix + "Postcode").val(dict["postal_code"] || '');
    $(ContainerId).find("#" + AddressPrefix + "Country").val(dict["country"] || 'United Kingdom');

    var isPostal = false;
    if (place.types && place.types.length)
        if ($.inArray("postal_code", place.types) >= 0 && $.inArray("postal_code_prefix", place.types) < 0)
            isPostal = true;

    // Add street number
    InputAdder(adr, adressPrefixValue, true);

    // Add premise
    if (adressPrefixValue.length == 0 || adr.val().length + (dict["premise"] || '').length > 100)
        adr = $(ContainerId).find("#" + AddressPrefix + "Address2"), switched = true;
    InputAdder(adr, (dict["premise"] || ''), true);

    // Add route
    if (adr.val().length + (dict["route"] || '').length > 100) {
        adr = $(ContainerId).find("#" + AddressPrefix + (switched ? "City" : "Address2"));
        if (switched)
            switchedAgain = true;
        else
            switched = true;
    }
    InputAdder(adr, (dict["route"] || ''), !switchedAgain, adressPrefixValue.length > 0 && adr.val() == adressPrefixValue);

    // Add locality
    InputAdder(switched ? adr : $(ContainerId).find("#" + AddressPrefix + "Address2"), (dict["locality"] || ''), !switchedAgain);

    if (!isPostal)
        WriteBorderedBox(false, ContainerId, "The postcode provided doesn't appear to be complete/valid. Please confirm the below address is correct."),
        $(ContainerId).find("#" + AddressPrefix + "Address1").focus();
}

Helper functions

function InputAdder(Obj, Text, Post, DontAddComma) {
    if (Obj && Text.length > 0) {
        var
            i = Obj.val().trim() || '',
            comma = !!DontAddComma ? "" : ",";

        Obj.val(
            (Post && i.length > 0 ? i + comma + ' ' : '') +
            Text.trim() +
            (!Post && i.length > 0 ? comma + ' ' + i : ''));
    }
}
function WriteBorderedBox(outcome, identifier, text) {
    var
        box = $("<div class=\"Bordered" + (outcome ? "Success" : "Error") + "\"><p>" + text + "</p></div>");
    $(identifier).before(box);
    box.hide().slideDown(function () { $(this).delay(6000).slideUp(function () { $(this).remove(); }); });
}

If you want a button (like me)

$("#AddressSearchFieldButton").click(function (e) {
    var input = document.getElementById("AddressSearchField");

    google.maps.event.trigger(input, 'focus')
    google.maps.event.trigger(input, 'keydown', { keyCode: 40 });
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
});

来源：https://stackoverflow.com/questions/29844694/google-place-autocomplete-for-postal-code

标签

javascript

google-maps

google-maps-api-3

autocomplete