Skip to content

All topics  /  PHP

How to Get Country State City Using Google API in PHP?

PHP

Teams applying “How to Get Country State City Using Google API in PHP?” in a production project can use the product resource to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Dec 10, 2022

Hi Dev,

Using Google apis to obtain nation, state, and city information; this tutorial will teach you how to do so.

Step 1: Get Google API Key


Before making calls to the Google Maps Geocoding service, you must create a Google Map API key.

https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started

1. Visit the Google Cloud Platform Console.

2. To add an API key to a project, click the project drop-down and choose or create it.

3. Click the menu button and select APIs & Services > Credentials.

4. On the Credentials page, click Create credentials > API key.The API key created dialog displays your newly created API key.

5. Click Close.The new API key is listed on the Credentials page under API keys.(Remember to restrict the API key before using it in production.)

Step 2: Implement Code to Show Country State City

index.php 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Display Country State City using Google API</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
    <div class="alert alert-success" role="alert">
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Address:</label>
            <div class="col-sm-8">        
                <input type="text" id="YourPlaces" name="YourPlaces" />
                <input type="text" id="YourCity" name="YourCity" placeholder="Your City" />
                <input type="text" id="YourState" name="YourState" placeholder="Your State" />
                <input type="text" id="YourCountry" name="YourCountry" placeholder="Your Country" />
                <input type="text" id="YourPinCode" name="YourPinCode" placeholder="Your Pin Code" />
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCXFJ-lc7cHHcEklG2_oIhTnPKTWsLwHEU"></script>
<script>
google.maps.event.addDomListener(window, 'load', function () 
{
    var places = new google.maps.places.Autocomplete(document.getElementById('YourPlaces'));
    google.maps.event.addListener(places, 'place_changed', function () 
    {
        console.log(places.getPlace());
        var getaddress    = places.getPlace();              //alert(getaddress.address_components[0].long_name);
        var whole_address = getaddress.address_components;  //alert(whole_address + 'whole_address');   
        $('#YourCity').val('');
        $('#YourState').val('');
        $('#YourCountry').val('');
        $('#YourPinCode').val('');
        $.each(whole_address, function(key1, value1) 
        {
            //alert(value1.long_name);
            //alert(value1.types[0]);
            if((value1.types[0]) == 'locality')
            {                
                var prev_long_name_city = value1.long_name;  
                //alert(prev_long_name_city + '__prev_long_name_city');
                $('#YourCity').val(prev_long_name_city);
            }
            if((value1.types[0]) == 'administrative_area_level_1')
            {
                var prev_long_name_state = value1.long_name;  
                //alert(prev_long_name_state + '__prev_long_name_state');
                $('#YourState').val(prev_long_name_state);
            }
            if((value1.types[0]) == 'country')
            {
                var prev_long_name_country = value1.long_name;  
                //alert(prev_long_name_country + '__prev_long_name_country');
                $('#YourCountry').val(prev_long_name_country);
            }
            if((value1.types[0]) == 'postal_code')
            {
                var prev_long_name_pincode = value1.long_name;  
                //alert(prev_long_name_pincode + '__prev_long_name_pincode');
                $('#YourPinCode').val(prev_long_name_pincode);        
            }
        }); 
    });
});
</script>

Step 3: Add Google Api Key in Code 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=API_KEY_CODE"></script>

I hope it could help you...

More on this topic