How to get the country code from Google Places API

Question

I am trying to use HTML 5 GeoLocation to get longitude and latitude and then use Google Maps API to get the country code of that longitude/latitude. Is there any simpler way to get country code from google places api?

I found the solution from this link ==> Getting country code from Google Maps and HTML 5 GeoLocation to get the country code.

Is there way to get country code directly from google places api without getting latitude and longitude first and then passing to google maps api.

This is the following script that I am using to get the country code from google places api

<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
 // location types.
  autocomplete = new google.maps.places.Autocomplete(
  /** @type {!HTMLInputElement}     */(document.getElementById('autocomplete')),
  {types: ['(cities)']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  //autocomplete.addListener('place_changed', fillInAddress);

// Get Latitude and longitude

  google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        //document.getElementById('city2').value = place.name;
        document.getElementById('lat').value = place.geometry.location.lat();
        document.getElementById('lng').value = place.geometry.location.lng();

    });
}

// [START region_fillform]
function fillInAddress() {
 // Get the place details from the autocomplete object.
 var place = autocomplete.getPlace();

  for (var component in componentForm) {
   document.getElementById(component).value = '';
   document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
 // and fill the corresponding field on the form.
 for (var i = 0; i < place.address_components.length; i++) {
   var addressType = place.address_components[i].types[0];
   if (componentForm[addressType]) {
    var val = place.address_components[i][componentForm[addressType]];
    document.getElementById(addressType).value = val;
  }
  }
  }
  // [END region_fillform]

</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&callback=initAutocomplete"
    async defer></script>

Answer 1

To get the country code, get the short name of the address component with type country :

// for the country, get the country code (the "short name") also
if (addressType == "country") {
  document.getElementById("country_code").value = place.address_components[i].short_name;
} 

code snippet:

 // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } // for the country, get the country code (the "short name") also if (addressType == "country") { document.getElementById("country_code").value = place.address_components[i].short_name; } } } var placeSearch, autocomplete; var componentForm = { locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', }; function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical // location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete')), { types: ['(cities)'] }); // When the user selects an address from the dropdown, populate the address // fields in the form. // Get Latitude and longitude google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); document.getElementById('lat').value = place.geometry.location.lat(); document.getElementById('lng').value = place.geometry.location.lng(); fillInAddress(); }); } google.maps.event.addDomListener(window, 'load', initAutocomplete);

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" type="text" /> </div> <table id="address"> <tr> <td class="label">City</td> <td class="wideField" colspan="3"> <input class="field" id="locality" disabled="true" /> </td> </tr> <tr> <td class="label">State</td> <td class="slimField"> <input class="field" id="administrative_area_level_1" disabled="true" /> </td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="2"> <input class="field" id="country" disabled="true" /> </td> <td class="label">Country Code</td> <td class="shortField"> <input class="field" id="country_code" disabled="true" /> </td> </tr> <tr> <td class="label">latitude</td> <td class="wideField" colspan="3"> <input class="field" id="lat" disabled="true" /> </td> </tr> <tr> <td class="label">longitude</td> <td class="wideField" colspan="3"> <input class="field" id="lng" disabled="true" /> </td> </tr> </table>

Answer 2

You will get postal code, country, state, city and other with using below function.

export let placeAddresCompoponent = {
    ZIP_CODE: 'postal_code',
    COUNTRY: 'country',
    STATE: 'administrative_area_level_1',
    CITY: 'administrative_area_level_2',
    TOWN: 'sublocality_level_1',
    AREA: 'sublocality_level_2',
    NEAREST_ROAD: 'route'
}

Use the below function for getting data from the address component. You will get address_components from the result of Google Place Api .

export function getAddressComponent(address_components, key) {
    var value='';
    var postalCodeType = address_components.filter(aComp =>
        aComp.types.some(typesItem => typesItem === key))
    if (postalCodeType != null && postalCodeType.length > 0)
        value = postalCodeType[0].long_name
    return value;
}

You can get the specific address component using below.

addressComponent = Array of address_components from google place api result

var zipCode = getAddressComponent(addressComponent, placeAddresCompoponent.ZIP_CODE)
var country = getAddressComponent(addressComponent, placeAddresCompoponent.COUNTRY)
console.log('zipCode : ', zipCode)
console.log('country : ', country)

Answer 3

Finally got the solution to get country code in google search api . This code may help to someone.

<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',
  political: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['(cities)']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
        if(place.address_components[i][componentForm['political']]){
            console.log(place.address_components[i][componentForm['country']]);
            if(isNaN(place.address_components[i][componentForm['political']])){
                country_code=place.address_components[i][componentForm['political']];
                var country_name=place.address_components[i][componentForm['country']];
            }
        }
      document.getElementById(addressType).value = val;

    }
  }
  // **Country code, Country name goes here**
  document.getElementById("Country_code").value=country_code;
  document.getElementById("Country_name").value=country_name;
  console.log('Country Code='+country_code+', Country Name='+country_name);
}
// [END region_fillform]

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&callback=initAutocomplete"
        async defer></script>

Answer 4

<?php
$address = '77-379 North End road, London London SW61NP, United Kingdom'; // Your address(Please USe exist address)
$prepAddr = str_replace(' ','+',$address);

$geocode=file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&key=AIzaSyDUpz-WEZ7r24PPkGKEuyqBd9VsPPVPcQk&sensor=false');
$output= json_decode($geocode);


if ( isset($output->results) ) {
    if ( isset($output->results[0]) ) {
        if ( isset($output->results[0]->address_components) ) {
            foreach ($output->results[0]->address_components as $key => $value) {   
                if ( isset($value->types) ) {
                    if ( isset($value->types[0]) ) {
                        if($value->types[0] == 'country'){
                            print_r($value->short_name); //GB
                        }
                    }
                }
            }
        }
    }
} ?>

Answer 5

 // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } // for the country, get the country code (the "short name") also if (addressType == "country") { document.getElementById("country_code").value = place.address_components[i].short_name; } } } var placeSearch, autocomplete; var componentForm = { locality: 'long_name', administrative_area_level_1: 'long_name', country: 'long_name', }; function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical // location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete')), { types: ['(cities)'] }); // When the user selects an address from the dropdown, populate the address // fields in the form. // Get Latitude and longitude google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); document.getElementById('lat').value = place.geometry.location.lat(); document.getElementById('lng').value = place.geometry.location.lng(); fillInAddress(); }); } google.maps.event.addDomListener(window, 'load', initAutocomplete);

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" type="text" /> </div> <table id="address"> <tr> <td class="label">City</td> <td class="wideField" colspan="3"> <input class="field" id="locality" disabled="true" /> </td> </tr> <tr> <td class="label">State</td> <td class="slimField"> <input class="field" id="administrative_area_level_1" disabled="true" /> </td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="2"> <input class="field" id="country" disabled="true" /> </td> <td class="label">Country Code</td> <td class="shortField"> <input class="field" id="country_code" disabled="true" /> </td> </tr> <tr> <td class="label">latitude</td> <td class="wideField" colspan="3"> <input class="field" id="lat" disabled="true" /> </td> </tr> <tr> <td class="label">longitude</td> <td class="wideField" colspan="3"> <input class="field" id="lng" disabled="true" /> </td> </tr> </table>

Answer 6

<vue-google-autocomplete required="" id="p-map" v-model="address" ref="address" classname="form-control" placeholder="Enter delivery address" v-on:placechanged="getAddressData">
                                        </vue-google-autocomplete>

getAddressData: function (_addressData, placeResultData) {
       const country = placeResultData.address_components.find(ad => ad.long_name === _addressData.country);
       const country_code = country.short_name
       console.log(country_code)
    }

If you are using the vue-google-autocomplete plugin, this is one way to do it