In this tutorial, we will learn How to integrate the Google Maps autocomplete in Javascript, you can use the Google Places Autocomplete API. This API allows you to add autocomplete functionality to your input fields, making it easier for users to enter addresses or locations.
As you can see in this example how to integrate Google Maps autocomplete in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Autocomplete PHP Example</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script>
function initAutocomplete() {
// Create the autocomplete object for the search input field
var input = document.getElementById("autocomplete");
var autocomplete = new google.maps.places.Autocomplete(input);
// When a place is selected from the autocomplete dropdown
autocomplete.addListener("place_changed", function () {
var place = autocomplete.getPlace();
if (!place.geometry) {
// Handle invalid place selected
window.alert("Invalid place selected");
return;
}
// Use the place object as needed
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
console.log("Latitude: " + lat);
console.log("Longitude: " + lng);
});
}
</script>
</head>
<body>
<h1>Google Maps Autocomplete</h1>
<input type="text" id="autocomplete" placeholder="Enter a location">
<script>
// Load the Autocomplete API asynchronously
function loadScript() {
var script = document.createElement("script");
script.src =
"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete";
document.body.appendChild(script);
}
// Replace "YOUR_API_KEY" with your actual API key
window.onload = loadScript;
</script>
</body>
</html>
As you can see in the above example, we create an input field with the ID “autocomplete” where users can enter their desired location. We will include the Google Places of Autocomplete API script, which provides autocomplete functionality.
When the page loads, the initAutocomplete() function is called. This creates an instance of google.maps.places.Autocomplete and associates it with the input field. This enables the AutoComplete functionality for input fields.
When a user selects a location from the autocomplete dropdown, the place_changed event is triggered. In the event listener, we retrieve the selected location using autocomplete.getPlace(). We can then access the location coordinates (latitude and longitude) of the location using place.geometry.location.lat() and place.geometry.location.lng().
Replace “YOUR_API_KEY” in the API script URL with your actual Google Maps API key.
Remember to include the Google Places Autocomplete API library by adding a script tag API URL at the end of the body section of your HTML.
