google autocomplete places API error

Question

Failed to load resource: the server responded with a status of 404 (Not Found) Uncaught ReferenceError: google is not defined

I am getting not a single error on my local server but when I upload it, sometimes it works properly and sometimes I get above error

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDnromYDZNK6L8PKCf1WD1nuQw1VPoriF0&amp;libraries=places&region=in&callback=initialize" type="text/javascript"></script>

<script type="text/javascript">
       function initialize() {

         var options = {
           types: ['(cities)'],
           componentRestrictions: {country: "in"}
          };

               var input = document.getElementById('searchTextField');
               var autocomplete = new google.maps.places.Autocomplete(input);
       }
       google.maps.event.addDomListener(window, 'load', initialize);
</script>

I tried moving the google api tag at top before jquery and at bottom too after every script tag but it does'nt seems to work ,I tried adding this callback initialize too but nothing happened instead I got error stating "initialize is not a function, any help please?

Answer 1

 <input type="text" id="searchTextField" /> <script src="https://maps.google.com/maps/api/js?key=AIzaSyB1MmBkuC0-9JhLWYaot-Yq_SmzunUgW68&libraries=places" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var options = { types: ['(cities)'], componentRestrictions: {country: "in"} }; var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); } google.maps.event.addDomListener(window, 'load', initialize); </script> 

You are defining a callback here : /maps/api/js?key=API_KEY_HERE&&callback=initialize

This will call your initialize() method once google maps has loaded all its components.

But you are calling the google.maps.event.addDomListener(window, 'load', initialize); outside this function, hence, when google is not yet loaded.

You should try to include your addDomListener call in your initialize() call !

Answer 2

使用https：//而不是http：//解决了我的问题