How to limit google autocomplete results to City and Country only

How to limit google autocomplete results to City and Country only

I am using google autocomplete places javascript to return suggested results for my searchbox , what I need is to only show the city and the country related to the characters entered but google api will give a lot of general places results which I dont need , so how to limit the result to show only city and the country .
I am using the following Example:

Google Maps JavaScript API v3 Example: Places Autocomplete



Solutions/Answers:

Solution 1:

You can try the country restriction

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

More info:

ISO 3166-1 alpha-2 can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country.

The country must be passed as as a two character, ISO 3166-1 Alpha-2 compatible country code.

Related:  How to find the day, month and year with moment.js

Officially assigned country codes

Solution 2:

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>
var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

reference to other types: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

Solution 3:

try this

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places” type=”text/javascript”

Change this to: “region=in” (in=india)

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&region=in” type=”text/javascript”

Solution 4:

The answer given by Francois results in listing all the cities from a country. But if the requirement is to list all the regions (cities + states + other regions etc) in a country or the establishments in the country, you can filter results accordingly by changing types.

Related:  Why can't nested describe() blocks see vars defined in outer blocks?

List only cities in the country

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

List all cities, states and regions in the country

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

List all establishments — such as restaurants, stores, and offices in the country

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

More information and options available at

https://developers.google.com/maps/documentation/javascript/places-autocomplete

Hope this might be useful to someone

Solution 5:

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.

Related:  detect if checkbox is checked or unchecked in angularjs ng-change event

Solution 6:

Basically same as the accepted answer, but updated with new type and multiple country restrictions:

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Using '(regions)' instead of '(cities)' allows to search by postal code as well as city name.

See official documentation, Table 3:
https://developers.google.com/places/supported_types