How to limit google autocomplete results to City and Country only

Question

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    lt html gt   lt head gt   lt style type  text css  gt     body            font-family  sans-serif           font-size  14px        lt  style gt    lt title gt Google Maps JavaScript API v3 Example  Places Autocomplete lt  title gt   lt script src  http   maps googleapis com maps api js sensor false amp amp libraries places  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt     function initialize           var input   document getElementById  searchTextField          var autocomplete   new google maps places Autocomplete input           google maps event addDomListener window   load   initialize    lt  script gt    lt  head gt   lt body gt      lt div gt         lt input id  searchTextField  type  text  size  50  placeholder  Enter a location  autocomplete  on  gt      lt  div gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

x000D   x000D   lt html gt  x000D   lt head gt  x000D   lt style type  text css  gt  x000D     body   x000D           font-family  sans-serif  x000D           font-size  14px  x000D       x000D   lt  style gt  x000D   x000D   lt title gt Google Maps JavaScript API v3 Example  Places Autocomplete lt  title gt  x000D   lt script src  https   maps googleapis com maps api js sensor false amp libraries places  type  text javascript  gt  lt  script gt  x000D   lt script type  text javascript  gt  x000D     function initialize     x000D        var input   document getElementById  searchTextField    x000D        var options     x000D          types    geocode     this should work   x000D           x000D        var autocomplete   new google maps places Autocomplete input  options   x000D       x000D     google maps event addDomListener window   load   initialize   x000D   lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D      lt div gt  x000D         lt input id  searchTextField  type  text  size  50  placeholder  Enter a location  autocomplete  on  gt  x000D      lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    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

User · Answer

I found a solution for myself  var acService   new google maps places AutocompleteService    var autocompleteItems        acService getPlacePredictions       types     regions       function predictions        predictions forEach function prediction            if  prediction types some function x                    return x      country     x      administrative area1     x      locality                                 if  prediction terms length  lt  3                    autocompleteItems push prediction                                         this solution only show city and country

User · Answer

try this  x000D   x000D   lt html gt  x000D   lt head gt  x000D   lt style type  text css  gt  x000D     body   x000D           font-family  sans-serif  x000D           font-size  14px  x000D       x000D   lt  style gt  x000D   x000D   lt title gt Google Maps JavaScript API v3 Example  Places Autocomplete lt  title gt  x000D   lt script src  https   maps googleapis com maps api js sensor false amp amp libraries places amp region in  type  text javascript  gt  lt  script gt  x000D   lt script type  text javascript  gt  x000D     function initialize     x000D        var input   document getElementById  searchTextField    x000D        var autocomplete   new google maps places Autocomplete input   x000D       x000D     google maps event addDomListener window   load   initialize   x000D   lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D      lt div gt  x000D         lt input id  searchTextField  type  text  size  50  placeholder  Enter a location  autocomplete  on  gt  x000D      lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    http   maps googleapis com maps api js sensor false amp libraries places  type  text javascript   Change this to   region in   in india    http   maps googleapis com maps api js sensor false amp libraries places amp region in  type  text javascript

User · Answer

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   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

User · Answer

Also you will need to zoom and center the map due to your country restrictions   Just use zoom and center parameters      function initialize       var myOptions         zoom  countries  us   zoom      center  countries  us   center      mapTypeControl  false      panControl  false      zoomControl  false      streetViewControl  false             all other code

User · Answer

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   Officially assigned country codes

User · Answer

lt html gt     lt head gt       lt title gt Example Using Google Complete API lt  title gt        lt  head gt     lt body gt    lt form gt      lt input id  geocomplete  type  text  placeholder  Type an address location   gt       lt  form gt      lt script src  http   maps googleapis com maps api js sensor false amp amp libraries places  gt  lt  script gt      lt script src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt      lt script src  http   ubilabs github io geocomplete jquery geocomplete js  gt  lt  script gt     lt script gt       function                    geocomplete   geocomplete                                         lt  script gt    lt  body gt   lt  html gt    For more information visit this link

User · Answer

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  lt  result address components length  i    1      var addressObj   result address components i     for var j   0  j  lt  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

[javascript] How to limit google autocomplete results to City and Country only

Examples related to javascript

Examples related to autocomplete

Examples related to google-maps-api-3