Javascript google API自动完成无法正常工作

我对自动完成GoogleAPI是一个全新的人，我的代码中几乎没有错误，但自从几个月前我开始使用JS以来，我还没有找到一种方法来修复它们

如果有人能告诉我下一个问题的解决方案，谢谢

那么接下来就是问题了： 当用户来到我的网站并开始键入他的地址时，我希望有一些默认界限，当用户开始键入某个地址时，它将仅显示沃特福德市、特拉莫尔或费里班克的地址，除非用户键入的地址不在这些城市的地址中或以“伦敦”开头

你可以在这里看到我的网站：

使用谷歌自动完成API

它应该像我上面所说的那样工作，而且如果用户输入了一些无效的地址，比如说都柏林，它会弹出一个模态，像现在这样

谢谢大家

代码示例：

HTML

javascript代码
var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”
};
函数initAutocomplete（）{
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=''；
document.getElementById（组件）.disabled=false；
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于（变量i=0；i

为什么要将此标记为facebook

？请适当标记。

<div id="locality">
<input class="form-control" style="font-size:25px;color:black;" id="autocomplete" placeholder="Enter your home address" value="<?php echo isset($_SESSION['address']) ? $_SESSION['address'] : (isset($_SESSION['user']['address']) ? $_SESSION['user']['address'] : '') ;?>"
onFocus="geolocate()" type="text" name="address" required>
<input type="hidden" name="lat"id="lat" value="">
<input type="hidden" name="long" id="long" value="">
 </div>

<script type="text/javascript">

        /*function initialize() {
            var options = {
                language: 'en-GB',
                types: ['(cities)'],
                componentRestrictions: { country: "ie" }
            };
            var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input , options);
            console.log('autocomplete', autocomplete);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        */


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.
    var options = {

        language: 'en-GB',
        types: ['(cities)'],
        componentRestrictions: { country: "ie" },
        types: ['geocode']
    };
  autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    for (var componentPart in componentForm) {
        if (document.getElementById(componentPart)) {
            document.getElementById(componentPart).value = '';
            document.getElementById(componentPart).disabled = false;
        }
        //else {
        //  console.log('Sorry but we dont have service in that area!!');
        //  $("#myModal3").modal();

        //  $('#proceed').prop('disabled', true);
        //  return false;
        //}
    }

    $("#autocomplete").change(function () {
                $("#autocomplete").val('');
              });
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  if (place.address_components) {
      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]]
          city = ['Waterford', 'Ferrbybank', 'Tramore']; 
              console.log(addressType, val);
          if (addressType == 'locality' && jQuery.inArray(val, city) != -1 ) {
              console.log('Grad je podrzan');


              //locality      
          } else if (addressType == 'locality') {
              $("#autocomplete").val('');
             console.log('Sorry but we dont have service in that area!!');
             $("#myModal3").modal();
          }
          document.getElementById(addressType).value = val;
          document.getElementById(component).disabled = false;
        }
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.

    </script>



       <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDhl9cKowvI8PL6unASVZSA01Cm-yMyk5E&libraries=places&region=ie&callback=initAutocomplete" type="text/javascript"></script>
    </body>

  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(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['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;
    }

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