Google Autocomplete - wie Informationen über die geladene Adresse abgerufen werden?

Question

Ich habe einen Eingang, wo ein Benutzer seinen Standort eingibt. Von diesem Ort möchte ich Stadt, Staat und PLZ holen und diese Informationen in andere Eingänge eintragen (Eingänge für Stadt, Zustand und Zip), also muss der Benutzer diese Informationen nicht manuell füllen.

Ich fand ein Beispiel für das, was ich versuche zu erreichen here und versuche, es an meine Bedürfnisse zu ändern.

Also hier gehe ich:

var placeSearch, autocomplete_origin_address, autocomplete_destination_address; 
var componentForm_origin = { 
    user_origin_city: 'user_origin_city', 
    user_origin_state: 'user_origin_state', 
    user_origin_zip: 'user_origin_zip' 
}; 

function initAutocomplete() { 
    console.log('in "initAutocomplete"'); 
    autocomplete_origin_address = new google.maps.places.Autocomplete(
    document.getElementById('user_origin_address'), 
          types: ['geocode']} 
); 
    autocomplete_origin_address.addListener("place_changed", 
             fillInAddress(autocomplete_origin_address, 
                 "user_origin_address", 
                 "user_origin_city", 
                 "user_origin_state", 
                 "user_origin_zip")); 

} 

function fillInAddress(autocomplete_resource, address, city, state, zip) { 
    console.log("! !x"); 
    // Get the place details from the autocomplete object. 
    var place = autocomplete_resource.getPlace(); 

    // origin fields to populate with the selected address 
    var fetched_street_number = fetchAddressDetails(place, "street_number", "long_name"); 

    var fetched_address = fetchAddressDetails(place, "route", "long_name"); 
    $("#"+address).val(fetched_street_number + " " + address); 

    var fetched_city = fetchAddressDetails(place, "locality", "long_name"); 
    $("#"+city).val(fetched_city); 

    var fetched_state = fetchAddressDetails(place, "administrative_area_level_1", "short_name"); 
    $("#"+state).val(fetched_state); 

    var fetched_zip = fetchAddressDetails(place, "postal_code", "long_name"); 
    $("#"+zip).val(fetched_zip); 
} 

function fetchAddressDetails(autocomplete_place, detail_type, name_type){ 
    console.log("in fetchAddressDetails"); 
    var item = $.grep(autocomplete_place.address_components, 
        function(e){ return e.types[0] == detail_type; }); 
    var item_data = item[0][name_type]; 
    console.log("item_data: "+item_data); 
    return item_data;              
} 

initAutocomplete(); 

Aber wenn ich die Seite zu laden, bekomme ich diesen Fehler:

in "initAutocomplete" 
! !x 
in fetchAddressDetails 
Uncaught TypeError: Cannot read property 'address_components' of undefined 

Ich versuche das Problem zu google, kann aber nicht, es loszuwerden und mach es Code arbeiten. Was ich im Allgemeinen versuche - Ich habe 4 Eingänge auf der Seite, wo Benutzer die Adresse eingeben. Also ich möchte - wenn die Adresse zu jedem dieser 4 Eingänge eingeben - Ruby die Google Autocomplete-Funktionalität, holen Sie sich die Adresse und setzen Sie die Stadt/Staat/PLZ-Informationen auf die entsprechenden Eingaben.

Können Sie bitte beraten, warum es momentan nichts holt?

Vielen Dank im Voraus.

Answer 1

Vielleicht nur ein Tippfehler, aber es gibt einen Syntaxfehler, die das Problem verursachen könnte ...

types: ['geocode']} // <~~ missing it's opening curly brace..! 

sollte ein [Minimal, komplette lesen ...

{types: ['geocode']}