Skip to content

Instantly share code, notes, and snippets.

@ProfAndreaPollini

ProfAndreaPollini/googleAutocompleteDemoWithPlaceChangeListener

Created March 29, 2018 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ProfAndreaPollini/1d7d6c0f3dbd7fcdb1a72cf0d5532f43 to your computer and use it in GitHub Desktop.
Save ProfAndreaPollini/1d7d6c0f3dbd7fcdb1a72cf0d5532f43 to your computer and use it in GitHub Desktop.
Download ZIP
A HTML page that uses Google Place API Autocomplete to update some div content
Raw
googleAutocompleteDemoWithPlaceChangeListener
<html>
<head>
</head>
<body>
<input type="text" id="search-input" placeholder="Inserire la località">
<div id="city">
città
</div>
<div id="country">
stato
</div>
<script>
function initAutocomplete() {
console.log("entering initAutocomplete()");
var input = document.getElementById('search-input');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete,"place_changed",onPlaceChanged);
function onPlaceChanged() {
console.log("[*] on place changed event");
var place = autocomplete.getPlace();
if(!place.address_components)
return;
var city = place.address_components[0].long_name;
var n = place.address_components.length;
var country = place.address_components[n-1].long_name;
document.getElementById('city').innerHTML = city;
document.getElementById('country').innerHTML = country;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOJ_xtO9BpG_9VDtSeGttVXSrzT0bq-uo&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment