how to get country, state and city select option using google map api in php

  1. 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.
  2. Create HTML Form: Create an HTML file (e.g., index.html) with a form containing dropdowns for country, state, and city. You can use the google.maps.places.Autocomplete to provide location suggestions as the user types.

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Location Selector</title>
        <h1>Location Selector</h1>
             <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 />
        <script src=""></script>
        <script src="script.js"></script>

    Replace YOUR_GOOGLE_MAPS_API_KEY with your actual Google Maps API key.

  3. 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();

        stateAutocomplete.addListener('place_changed', function () {
            var place = stateAutocomplete.getPlace();

        cityAutocomplete.addListener('place_changed', function () {
            var place = cityAutocomplete.getPlace();

        // Function to update the dropdown values
        function updateDropdowns(place) {
            if (!place.geometry) {

            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_changed event. When a place is selected, it updates the values in the dropdowns.

  4. 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.

Post your Answer