API Google Places - автозаполнение не работает

Я задавал вопрос на эту же тему пару дней назад, но достиг некоторого прогресса (я нашел некоторый код), поэтому я решил создать новый вопрос.

Я все еще пытаюсь ввести API Google Places в форму для предприятий.

Я пробовал всевозможные комбинации из различных сообщений, которые я видел здесь, но все еще безрезультатно. Так что, скорее всего, я что-то упустил или допустил опечатку, которую не могу заметить.

Начиная с файла JavaScript

В очень простой версии файла вызов автозавершения работает.

function initAutocomplete(){  
      autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
        componentRestrictions: {'country':['uk']},
        fields: ['name','geometry','address_components'],
        types:['establishment','geocode']
      });
    
       autocomplete.addListener('place_changed');
    }

(Я получаю сообщение "Uncaught TypeError: Cannot read properties of undefined (reading 'apply')", но я все равно получаю возврат)

Однако, как только я начинаю добавлять больше кода, что-то ломается, и мне говорят, что "initAutocomplete не является функцией".

Я нашел решение этой проблемы.

Прочитав несколько сообщений здесь, простой способ избавиться от этого сообщения - просто избавиться от "&callback=initAutocomplete" в конце скрипта.

Но возникает новая проблема: автозавершение просто больше не срабатывает.

Исходя из этого, я решил поделиться кодом и надеюсь, что кто-то сможет что-то заметить.

JS File

$(function() {
    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(){  
  autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
    componentRestrictions: {'country':['uk']},
    fields: ['name','geometry','address_components'],
    types:['establishment','geocode']
  });

   autocomplete.addListener('place_changed', fillInAddress );
}


function fillInAddress(){
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value ='';
        //document.getElementById(component).disabled = false;
        $("#+ component").prop('readonly',false);

    }

    var location = place.geometry.location;
    var lattitude = place.geometry.latitude;
    var longitude = place.geometry.longitude;
    $("#latitude").val(parseFloat(latitude.toFixed(8)));
    $("#longitude").val(parseFloat(longitude.toFixed(8)));

//get each component of the address from the place details and fill the corresponding field on the form

    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]];
            document.getElementById(addressType).value = val;
        }
    }
}
// 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());
    });
}
}
})
$("#autocomplete").focus(function() {
    geolocate();
    });

HTML файл (Django framework)

{%load static %} 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXX&libraries=places"></script>
</head>
<h1>Google Places API test</h1>
    <body>
        <h6>This one doesnt work</h6>
         <input id="autocomplete" placeholder="Enter your address">
        <table id="address">
          <tr>
            <td class="label">Name</td>
            <td class="wideField" colspan="3"><input class="field" id="business" disabled="true" /></td>
          </tr>
          <tr>
            <td class="label">Street address</td>
            <td class="slimField">
              <input class="field" id="street_number" disabled="true" />
            </td>
            <td class="wideField" colspan="2">
              <input class="field" id="route" disabled="true" />
            </td>
          </tr>
          <tr>
            <td class="label">City</td>
            <td class="wideField" colspan="3">
              <input class="field" id="locality" disabled="true" />
            </td>
          </tr>
          <tr>
            <td class="label">State</td>
            <td class="slimField">
              <input class="field" id="administrative_area_level_1" disabled="true" />
            </td>
            <td class="label">Zip code</td>
            <td class="wideField">
              <input class="field" id="postal_code" disabled="true" />
            </td>
          </tr>
          <tr>
            <td class="label">Country</td>
            <td class="wideField" colspan="3">
              <input class="field" id="country" disabled="true" />
            </td>
          </tr>
        </table>
    </body>
</html>
Вернуться на верх