Seif E Seif E - 7 months ago 35
jQuery Question

Why does my autocomplete search fiels freeze when trying to pull cities from Google Places API?

In my web page base template, I have links for JQuery, Google Places API, plugin for autocomplete and JS code to to call the functionality.

<script src=""></script>

<script type="text/javascript" src=""></script>

<script src=""></script>






Finally I have a search field that I want to autocomplete city names

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

However it freezes and shows an exclamation mark as in this screenshot:enter image description here


This worked for me.

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

and within that html part, I added this:

<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 =;
            longitude = place.geometry.location.lng();
            document.getElementById('latitude').value =;
            document.getElementById('longitude').value = place.geometry.location.lng();                                     
    google.maps.event.addDomListener(window, 'load', initialize);