Matheus Pereira Matheus Pereira - 1 month ago 5
Python Question

google.maps.places.Autocomplete not working using SimpleHTTPServer

I am doing a location search and form auto fill using google.maps.places.Autocomplete.

It is working right accessing the html directly (file:///location.html), but is not working using python SimpleHTTPServer to serve the html (http://localhost:8000/location.html).

Accessing the html using localhost, the search input loads correctly, but shows no result. No suggestion is presented.

Html code

<meta charset="utf-8"/>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places"></script>
<script>
function initialize(){
var input = document.getElementById('searchTextField');
var options = {types: ['(cities)']};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
var search_result = {};
components = place.address_components;
for (i in components){
var name = components[i].types[0];
search_result[name] = components[i].long_name;
search_result[name + "_short"] = components[i].short_name;
}
var city = search_result.locality;
var state = search_result.administrative_area_level_1;
var country = search_result.country_short;
document.getElementById('city').value = city;
document.getElementById('state').value = state;
document.getElementById('country').value = country;
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50"></br></br>
<input id="city" type="text" size="50" disabled="disabled"></br></br>
<input id="state" type="text" size="50" disabled="disabled"></br></br>
<input id="country" type="text" size="50" disabled="disabled">
</body>
</html>


Python command

python -m SimpleHTTPServer 8000

Answer

This is a common issue with the Google Maps Places Autocomplete dropdown. There are a few things to check.

First, make sure that you have an explicit width set on the input element you want to use to append the place suggestions. Google Maps needs this to correctly affix the divs that contain suggestions as they are populated.

If that isn't your issue, and you aren't seeing any error in the JS console, open the network tab of your dev tools and watch the network requests that happen as you type into the input.

You should see a number of AJAX calls that should either contain suggestions, or additional error messages that you can use for debugging. One common error message has to do with the configuration of Google Maps permissions in the Developers Console:

"This API project is not authorized to use this API. Please ensure this API is activated in the Google Developers Console."

If this is the case, you will need to go enable API access for the API key you pass in the initialization of the Google library.

Comments