Warum wird meine Suche zur automatischen Vervollständigung eingefroren, wenn versucht wird, Städte aus der Google Places-API abzurufen?

Question

In meiner Webseite Basisvorlage habe ich Links für JQuery, Google Places API, Plugin für die automatische Vervollständigung und JS-Code, um die Funktionalität aufzurufen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaa7NZzS-SE4JW3J-7TaA1v1Y5aWUTiyc&libraries=places"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script> 

<script> 

    $(function(){ 

    $("#searchBoxGlow").geocomplete() 

    }); 

    </script> 

Endlich habe ich ein Suchfeld, das ich Stadtnamen

<input type="text" class="form-control input-lg" id="searchBoxGlow" name="city" placeholder="Search Cities"> 

aber es friert und zeigt ein Ausrufezeichen wie in diesem Screenshot automatisch zu vervollständigen will:

Answer 1

Das ist für mich gearbeitet.

<input type="text" id="searchplace" /> 
<input type="hidden" id="latitude" name="latitude"/> 
<input type="hidden" id="longitude" name="longitude"/> 

und innerhalb dieses HTML-Teil, habe ich dies:

<script type="text/javascript"> 
    function initialize() { 
     var searchBox = document.getElementById('searchplace'); 
     var autocomplete = new google.maps.places.Autocomplete(searchBox); 
     var latitude; 
     var longitude; 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 

      latitude = place.geometry.location.lat(); 
      longitude = place.geometry.location.lng(); 
      document.getElementById('latitude').value = place.geometry.location.lat(); 
      document.getElementById('longitude').value = place.geometry.location.lng();          
     });            
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>