Last active
July 1, 2024 19:24
-
-
Save thatguynef/c68452cc2cf31d112b9ba6d76911ae1d to your computer and use it in GitHub Desktop.
Tutorial - Google Places API Autocomplete Library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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