Get only countries to autocomplete from Google Map

2020-02-28 03:20发布

站内问答 / JavaScript
689 3 4

I'm using Google Maps API to get autocomplete list of cities and countries (without other details), and it works exellent. 

var input = document.getElementById('newAddress');
    var options = {
        types: ['(cities)']
    };

    autocomplete = new google.maps.places.Autocomplete(input, options);

Now I want to do exactly the same but to get only countries names. Somthing like replacing types: ['(cities)'] with types: ['(countries)']...
(what I tried but didn't work)

What should I do in order to get only countries into my autocomplete?

3条回答
做自己的国王
2楼-- · 2020-02-28 03:58 
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
</div>
<div><pre><p id="data"></p></pre></div>
<script type=">
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),{ types: ['(cities)'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var address_components=autocomplete.getPlace().address_components;
var city='';
var country='';
for(var j =0 ;j<address_components.length;j++)
{
 city =address_components[0].long_name;
 if(address_components[j].types[0]=='country')
{
    country=address_components[j].long_name;
}
}
document.getElementById('data').innerHTML="City Name : <b>" + city + "</b> <br/>Country Name : <b>" + country + "</b>";
});
}
initialize();
</script>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2020-02-28 04:07

I've been playing around with the Google Autocomplete API for a bit and here's the best solution I could find for limiting your results to only countries:

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

If you look at the result object that's returned, you'll see that there's an address_components array which will contain several objects representing different parts of an address. Within each of these objects, it will contain a 'types' array and within this 'types' array, you'll see the different labels associated with an address, including one for country.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2020-02-28 04:14

There is no quick solution as Google only offers two type collections: ['(cities)'] and ['(regions)']

There is no ['(countries)'] available.

Documentation here: https://developers.google.com/places/documentation/autocomplete#place_types

EDIT:

You could as an alternative use an autocomplete plugin sourced from this url: http://www.geognos.com/api/en/countries/info/all.json

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)