Integrate the Google Places API Script
- Start by adding the Google Places API script in your HTML code. Ensure you include the Places library by appending `libraries=places` to the script URL.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Initialize the Autocomplete Functionality
- Once the Google Places API script is loaded, you can initialize an autocomplete object by selecting an input field where you want the address suggestions to appear.
function initAutocomplete() {
const input = document.getElementById('autocomplete-input');
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(['address_components', 'geometry', 'icon', 'name']);
}
Handle Autocomplete Events
- Listen for when the user selects a place from the autocomplete predictions. You can retrieve details about the selected place and handle it as per your needs.
autocomplete.addListener('place_changed', function() {
const place = autocomplete.getPlace();
console.log('Place details:', place);
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
// Further handle the place details
});
Restrict Suggestions to Specific Areas
- You may want to limit the autocomplete suggestions to specific regions, such as a particular country. Use the `componentRestrictions` property to achieve this.
autocomplete.setComponentRestrictions({'country': ['us']});
Customize Autocomplete Types
- The autocomplete service can be customized to return only specific types of addresses or places. The most common types are geocode and address. Use the `types` option to set this preference.
autocomplete.setTypes(['geocode']); // Or use ['(cities)'] to get cities only
Styling the Input Field
- To enhance user experience, style the autocomplete input field. This involves using CSS to define how your input field and suggestions look.
<style>
#autocomplete-input {
width: 100%;
padding: 8px;
font-size: 16px;
}
</style>
Load the Autocomplete Function on Page Load
- Ensure that the initialization function is called when the page loads, enabling the autocomplete feature immediately for users.
<body onload="initAutocomplete()">
<input id="autocomplete-input" type="text" placeholder="Enter your address">
</body>
