Google Maps autocomplete Felder werden nicht ausgefüllt..

[FrazeColder]

Guten Tag zusammen,

ich versuche gerade einen Fehler auf meinem Backend zu fixen und zwar geht es dabei um die Google Maps autocomplete Funktion. Das ganze hat schon mal funktioniert aber irgendwann ist mir dann aufgefallen, dass es nicht mehr funktioniert hat, das war allerdings schon einige Commits nachdem ich es bemerkt habe.. daher kann ich auch leider nicht mehr via Git das ganze richtig stellen..

Jedenfalls habe ich in meinem Backend mehrere Google Maps autocomplete Felder, da ich mehrere Adressen von unterschiedlichen Personen festhalten muss. Dies ist der Grund dafür, wieso ich mich an Folgendem Beispiel orientiert habe:
https://stackoverflow.com/questions...nitautocomplete-on-same-html-page-google-maps

Das Problem welches ich allerdings habe ist, dass die Felder leider nicht von der Suche ausgefüllt werden.. Zwar bekomme ich die richtigen Werte von der API geliefert und der JS Code durchläuft auch die ganzen if-statements im JS Code, da die Ergebnisse geloggt werden, allerdings werden diese eben nicht in die Textfelder geschrieben.. Aus mir unerklärlichen Gründen ist dies aber nie der Fall bei der Postleitzahl. Diese wird immer ausgefüllt.. Die anderen Felder aber nicht.. Und ich weiß leider nicht woran dies liegt..

Dies ist mein Code:

<div class="form-group">
    <label class="col-sm-12 label_class" for="modal_street">Google Adresse</label>
    <div class="col-sm-12">
        <input type="text" onFocus="geolocate()" class="form-control toggleLocked" id="autocomplete" value="" {{ $disabled }}>
    </div>
</div>
<div class="form-group">
   <label class="col-sm-12 label_class" for="modal_street">Straße</label>
   <div class="col-sm-12">
       <input type="text"  class="form-control toggleLocked" id="modal_street" autocomplete="street-address" {{ $disabled }}>
   </div>
</div>
<div class="form-group">
   <label class="col-sm-12 label_class" for="modal_zip">Postleitzahl</label>
   <div class="col-sm-12">
       <input type="text" class="form-control toggleLocked" id="modal_zip" autocomplete="postal-code" {{ $disabled }}>
   </div>
</div>
<div class="form-group">
    <label class="col-sm-12 label_class" for="modal_city">Ort</label>
    <div class="col-sm-12">
        <input type="text" class="form-control toggleLocked" id="modal_city" autocomplete="city" {{ $disabled }}>
    </div>
</div>
<div class="form-group">
   <label class="col-sm-12 label_class" for="modal_country">Land</label>
   <div class="col-sm-12">
       <input type="text" class="form-control toggleLocked" id="modal_country" autocomplete="country-name">
   </div>
</div>

<script>
    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddressForm);
    }

    function fillInAddressForm() {
        var place = autocomplete.getPlace();

        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];

            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                var field = addressType;

                document.getElementById('modal_country').value = "";
                document.getElementById('modal_city').value = "";
                document.getElementById('modal_zip').value = "";
                document.getElementById('modal_street').value = "";

                if(field=="country") {
                    console.log(field, val);
                    $('#modal_country').val(val);
                }

                if(field=="locality") {
                    console.log(field, val);
                    $('#modal_city').val(val);
                }

                if(field=="postal_code") {
                    console.log(field, val);
                    $('#modal_zip').val(val);
                }

                if(field=="street_number") {
                    console.log(field, val);
                    var streetnum = $('#modal_street').val();
                }

                // Join street number with street to one input
                if(field=="route") {
                    if(streetnum) {
                        completeadress = val + ' ' + streetnum;
                    }
                    else {
                        completeadress = val;
                    }

                    $('#modal_street').val(completeadress);
                }
            }
        }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
                add_modal_autocomplete.setBounds(circle.getBounds());
                add_contact_autocomplete.setBounds(circle.getBounds());
                info_modal_autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

Was mich auch sehr sehr verwundert ist der Fakt, dass eben das Ergebnis in der Zeile nach dem if-statement in der Console geloggt wird, wenn ich aber meine $("#meinFeld").val(val) durch Folgende Zeile ersetze:

$('#modal_city').val(function( i, val ) { console.log("VALUE", i, val); })

Ist die Variable val wieder leer (siehe Folgenden Konsolen Output):

09:56:36.853 VALUE 0 
09:56:36.853 VALUE 0 
09:56:36.854 VALUE 0 
09:56:36.854 VALUE 0

Würde mich sehr freuen, wenn ihr mir weiterhelfen könnt..

Mit freundlichen Grüßen und Vielen Dank!

 

[Defender1st]

Hab mit der API jetzt noch nie gearbeitet, aber hat das einen Grund, dass du in der Schleife in Zeile 65-68 die Textfelder immer wieder leerst?
So bleibt doch nur das letzte Ergebnis in den Feldern (vermutlich die PLZ, die ja deiner Aussage nach immer gefüllt ist.)

 

[FrazeColder]

Danke, das war der Fehler!!!
Ich war einfach blind...