Skip to content

Instantly share code, notes, and snippets.

@thatguynef
Last active March 4, 2023 20:11
Show Gist options
  • Save thatguynef/c68452cc2cf31d112b9ba6d76911ae1d to your computer and use it in GitHub Desktop.
Save thatguynef/c68452cc2cf31d112b9ba6d76911ae1d to your computer and use it in GitHub Desktop.
Tutorial - Google Places API Autocomplete Library
// See tutorial video https://youtu.be/qpUfj4zPxWQ
// Google Dev Docs: https://developers.google.com/maps/documentation/javascript/places
// Insert this script in the <head> element
<script async
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap">
</script>
//Insert this script before the closing body tag </body>
<script>
// Alternatively, you can target your input element by ID
// Replace querySelector('input[name="search_input"]') with getElementById('search_input')
// and insert id="search_input" in your form's input field
var searchInput = document.querySelector('input[name="search_input"]');
document.addEventListener('DOMContentLoaded', function () {
var autocomplete = new google.maps.places.Autocomplete(searchInput, {
types: ['geocode'],
componentRestrictions: { country: 'us' }
});
autocomplete.addListener('place_changed', function () {
var near_place = autocomplete.getPlace();
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment