Monday, June 3, 2024
95
rated 0 times [  97] [ 2]  / answers: 1 / hits: 36075  / 9 Years ago, tue, november 24, 2015, 12:00:00

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>

More From » google-maps-api-3

 Answers
12

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>




[#64296] Friday, November 20, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
marinal

Total Points: 655
Total Questions: 99
Total Answers: 99

Location: Svalbard and Jan Mayen
Member since Sun, Sep 25, 2022
2 Years ago
;