谷歌API自動補全不能正常工作

Question

我是完全新的自動補全谷歌API，我在代碼中有一些錯誤，但我沒有看到一種方法來解決他們，因爲我已經開始使用JS幾個月前。

如果任何人都可以向我展示解決方案，接下來我的問題，謝謝。

所以，問題是下一個： 當用戶來到我的網站，並開始輸入自己的地址，我想有一些默認的界限，當用戶開始輸入某個地址，它會顯示他只對沃特福德市特拉莫爾地址或Ferrybank除非這是不是在任何這些城市的或與「倫敦」啓動用戶strats打字地址

你可以看到我的網站，在這裏工作：

stjepan-cizmek.from.hr/kollect_2016_08_26/

與咕gle autocomplete API

它應該像我上面告訴的那樣工作，並且如果用戶提出了一些無效的地址，比如說都柏林它會彈出一個現在的模態說法。

謝謝大家！

代碼例如：

HTML

<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> 

JS

<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> 

Answer 1

JavaScript代碼

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

https://maps.googleapis.com/maps/api/js?key=YOUR_API&libraries=places&callback=initAutocomplete