-
Get Google Maps API Key:
- Go to the Google Cloud Console.
- Create a new project or select an existing one.
- Enable the "Places API" for your project.
- Create an API key in the "APIs & Services" > "Credentials" section.
-
Create HTML Form: Create an HTML file (e.g.,
index.html) with a form containing dropdowns for country, state, and city. You can use thegoogle.maps.places.Autocompleteto provide location suggestions as the user types.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Location Selector</title> </head> <body> <h1>Location Selector</h1> <form> <label for="city">City:</label> <input type="text" id="city" name="city" class="form-control" required /> <label for="state">State:</label> <input type="text" id="state" name="state" class="form-control" required /> <label for="country">Country:</label> <input type="text" id="country" name="country" class="form-control" required /> </form> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places"></script> <script src="script.js"></script> </body> </html>Replace
YOUR_GOOGLE_MAPS_API_KEYwith your actual Google Maps API key. -
Create JavaScript File: Create a JavaScript file (e.g.,
script.js) to handle the Google Maps Places API calls and populate the dropdowns.// script.js
document.addEventListener('DOMContentLoaded', function () {
var countrySelect = document.getElementById('country');
var stateSelect = document.getElementById('state');
var citySelect = document.getElementById('city');// Create an Autocomplete object for each dropdown
var countryAutocomplete = new google.maps.places.Autocomplete(countrySelect);
var stateAutocomplete = new google.maps.places.Autocomplete(stateSelect);
var cityAutocomplete = new google.maps.places.Autocomplete(citySelect);// Listen for the place_changed event to update the dropdown values
countryAutocomplete.addListener('place_changed', function () {
var place = countryAutocomplete.getPlace();
updateDropdowns(place);
});stateAutocomplete.addListener('place_changed', function () {
var place = stateAutocomplete.getPlace();
updateDropdowns(place);
});cityAutocomplete.addListener('place_changed', function () {
var place = cityAutocomplete.getPlace();
updateDropdowns(place);
});// Function to update the dropdown values
function updateDropdowns(place) {
if (!place.geometry) {
return;
}var addressComponents = place.address_components;
var country = null;
var state = null;
var city = null;for (var i = 0; i < addressComponents.length; i++) {
var component = addressComponents[i];
if (component.types.includes('country')) {
country = component.long_name;
} else if (component.types.includes('administrative_area_level_1')) {
state = component.long_name;
} else if (component.types.includes('locality')) {
city = component.long_name;
}
}countrySelect.value = country;
stateSelect.value = state;
citySelect.value = city;
}
});
This JavaScript file initializes Autocomplete objects for each dropdown and listens for the
place_changedevent. When a place is selected, it updates the values in the dropdowns. -
Run the Application: Place the HTML file, the JavaScript file, and the Google Maps API script in the same directory. Open the HTML file in a web browser, and you should see the location selector with country, state, and city dropdowns.