web-dev-qa-db-fra.com

Google Place autocomplete pour code postal

J'essaie de créer une zone de texte à remplissage automatique qui ne devrait contenir que le code postal. Voici la documentation que j'ai suivie: https://developers.google.com/places/webservice/autocomplete#place_types

Exemple de travail JSFiddle est ici

Si j'utilise le postal_code, cela ne fonctionne pas pour moi, mais lorsque j'utilise le cities, tout va bien. Que dois-je faire pour obtenir une saisie semi-automatique avec uniquement des codes postaux?

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);
javascriptgoogle-mapsgoogle-maps-api-3autocomplete
12
Rishi Kulshreshtha

La documentation n'est pas très claire. 

  • la collection de types (régions) indique au service Place de retourner tout résultat correspondant aux types suivants:
    • localité
    • sublocalité
    • code postal
    • pays
    • administratif_area_level_1
    • niveau_area_administration_2
14
geocodezip

J'ai utilisé le type de composant d'adresse postal_code.

Assurez-vous que vous avez inclus la bibliothèque places dans votre URL de script en tant que:

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

Exemple de travail 

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

////////// PARTIE DE MON CODE DE TRAVAIL
////////// Remplacez getByElementId par vos ID de saisie de formulaire

  ////  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("");
     }
2
Yergalem

Je sais que c'est un peu vieux mais ... je pensais que je devrais partager mes connaissances et espérer que cela aidera quelqu'un.

@geocodezip a raison, vous ne pouvez pas demander spécifiquement à Google de ne renvoyer que les résultats du code postal. Cependant, vous pouvez demander des régions et dire à l'utilisateur quand il a tout gâché!

C'est le code que j'utilise. Il utilise 2 entrées; un préfixe d'adresse (nom/numéro de maison) et un code postal

Exigences:
Une div avec 2 entrées (pour la recherche).
En dessous, un conteneur div qui contient des entrées avec les id ci-dessous: (elles peuvent être préfixées)

  • Adresse 1
  • Adresse 2
  • Ville
  • Comté
  • Code postal
  • Pays

Chacune de mes entrées utilisateur a la classe "InputControl", je l'utilise donc dans ma fonction pour effacer les valeurs précédentes.

En l'utilisant 

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", "");
}

La fonction principale 

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

Fonctions d'assistance 

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

Si vous voulez un bouton (comme moi)

$("#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 });
});
1
glenn223