How to limit google autocomplete results to City and Country only

Asked 26/11, 2011 at 22:12 Answered 22/3 at 7:0

Solved javascript autocomplete google-maps-api-3

235

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:

<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="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" 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>

Transparency answered 26/11, 2011 at 22:12 Comment(0)

441

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

Sloganeer answered 16/4, 2012 at 7:52 Comment(20)

Do you know if there are any usage limit on auto complete queries if I am not loading any maps? I know there is a 25,000 usage limit if I load maps – Seat 29/3, 2013 at 21:53

This awsome examples. How to prepare all results to format like this: city, region, country? – Charmion 9/7, 2013 at 17:30

is there a way where i don't have to limit the country? – Schizothymia 31/3, 2014 at 9:20

try removing the restriction from the options. – Sloganeer 31/3, 2014 at 9:21

It's August 2014. Is it already possible to show only countries and cities? For e.g. when I type Mil, the result is Milan, Bergamo, Italy. I need only Milan, Italy. Adding all countries one by one is not an option. – Kleist 6/8, 2014 at 0:8

Hi @Kleist hope this post gives some insight. code.google.com/p/gmaps-api-issues/issues/detail?id=4233 – Sloganeer 7/9, 2014 at 11:24

Is it possible to specify more than one country? – Behaviorism 16/7, 2015 at 17:57

Thanks for the types: ['(cities)'] Was looking for this! – Kokoruda 7/8, 2015 at 15:51

@Behaviorism apparently it is not possible. Please star this issue if you want that feature. – Architrave 2/9, 2015 at 15:29

@Behaviorism : Having the same problem for multiple countries, stared the issue that google doesn't seem to take much care of. – Barrelchested 1/12, 2015 at 16:58

works great, but is there any way (don't want to go too much off topic) to make the search less strict ? I mostly work with french cities and if accents or hyphens do not match exactly the name of the city you are looking for it won't get any result – Sketchy 15/12, 2015 at 22:55

@Francois, using google map API can we add multiple cities in single textbox? Example I want to add multiple locations for "Preferred Location" for Job etc. – Arduous 26/5, 2016 at 12:46

if we use types: ['(cities)'] then it will not allowed us to search by zip code here. – Wainwright 29/8, 2016 at 6:30

adding type cities doen't allow to search location by zipcode. – Wainwright 6/9, 2016 at 11:0

apparently it allows restricting by more than one country by now: developers.google.com/maps/documentation/javascript/examples/… – Saltillo 24/9, 2018 at 12:28

Also, using types: ['(regions)'] instead of '(cities)' allows searching for postal code as well – Saltillo 24/9, 2018 at 12:35

I want to allow to choose city, bar, restaurant, hotels, airports and other small locations but NOT STATE NAME and COUNTRY NAME in google autocomplete, how can i do, please share any suggestion, thanks a lot :) – Hexagram 20/12, 2019 at 11:8

"Currently, you can use componentRestrictions to filter by up to 5 countries" developers.google.com/maps/documentation/javascript/… – Ancestor 9/4, 2020 at 22:38

Does it matter if the function is called initialize? When does this get called in the page? – Immanuel 15/9, 2020 at 0:0

Guys...is it possible to restrict the length of the formatted address? I want it not greater than 50 characters. – Athalee 12/11, 2021 at 6:17

<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

Olodort answered 26/11, 2011 at 22:25 Comment(3)

check this code right from google. they made a filtering example code.google.com/apis/maps/documentation/javascript/… – Olodort 26/11, 2011 at 22:37

autocomplete object will not accept two variables, only one variable can be accepted which is 'geocode'. I don't know how to solve this problem . Google documentation list a lot of type but none can be accepted. – Transparency 27/11, 2011 at 11:51

would the same parameters work for AutocompleteService? – Reclinate 27/3, 2019 at 19:24

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"}
     };

Also, you can add multiple types to the result filter like this:

List all the establishments equal to schools and drugstores, and places of type neighborhoods, locality, and sublocality

  var options = {
      types: ['school','drugstore','neighborhood', 'locality', 'sublocality'],
      componentRestrictions: {country: "us"}
     };

Note: See the available types and note that you can combine only the items at table 1 and table 2, and up to 5 items. Table 3 don't allow to combine.

More information and options available at

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

Hope this might be useful to someone

Birch answered 8/11, 2016 at 0:38 Comment(0)

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"

Suggestible answered 4/5, 2016 at 6:31 Comment(2)

We need list of cities, list of states, list of areas and so on – Valenciavalenciennes 3/8, 2018 at 12:21

This should be the accepted answer. The simplest and fastest way to achieve the result that the OP's asking. and it worked for me. – Mordancy 22/4, 2020 at 10:25

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

Saltillo answered 24/9, 2018 at 12:39 Comment(1)

Took me 5 minutes to figure out it's '(regions)' type, not 'regions' ... – Punctilio 19/11, 2021 at 9:51

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.

Lavonda answered 10/6, 2014 at 15:51 Comment(2)

Is there a way to restrict to only certain states in the US, or even exclude particular states? – Revis 9/3, 2016 at 1:58

@santafebound I'm trying to do the same thing (for a specific state in Australia). From the documentation it looks like the answer is 'No[t yet]', but I'm hoping to find a way to intercept the response object and restrict it by other keys in the data. – Foist 5/2, 2017 at 21:53

For country you can use this:

components=country:pak

https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak

Indogermanic answered 29/4, 2021 at 9:0 Comment(0)

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 < 3) {
                autocompleteItems.push(prediction);
            }
        }
    });
});

this solution only show city and country..

Septate answered 13/2, 2018 at 11:41 Comment(1)

Can you provide the full code list with autocomplete – Redstart 15/1, 2019 at 8:22

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

}

Spermaceti answered 25/11, 2014 at 23:34 Comment(0)

<html>
  <head>
    <title>Example Using Google Complete API</title>   
  </head>
  <body>

<form>
   <input id="geocomplete" type="text" placeholder="Type an address/location"/>
    </form>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
  <script>
   $(function(){        
    $("#geocomplete").geocomplete();                           
   });
  </script>
 </body>
</html>

For more information visit this link

Altercation answered 4/8, 2016 at 7:3 Comment(0)

For cities you can try this

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=new delhi&types=locality&key=Your_API_Key

Response

 {
    "predictions": [
        {
            "description": "New Delhi, Delhi, India",
            "matched_substrings": [
                {
                    "length": 9,
                    "offset": 0
                }
            ],
            "place_id": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
            "reference": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
            "structured_formatting": {
                "main_text": "New Delhi",
                "main_text_matched_substrings": [
                    {
                        "length": 9,
                        "offset": 0
                    }
                ],
                "secondary_text": "Delhi, India"
            },
            "terms": [
                {
                    "offset": 0,
                    "value": "New Delhi"
                },
                {
                    "offset": 11,
                    "value": "Delhi"
                },
                {
                    "offset": 18,
                    "value": "India"
                }
            ],
            "types": [
                "locality",
                "political",
                "geocode"
            ]
        },
        {
            "description": "New Delhi, Madhya Pradesh, India",
            "matched_substrings": [
                {
                    "length": 9,
                    "offset": 0
                }
            ],
            "place_id": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
            "reference": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
            "structured_formatting": {
                "main_text": "New Delhi",
                "main_text_matched_substrings": [
                    {
                        "length": 9,
                        "offset": 0
                    }
                ],
                "secondary_text": "Madhya Pradesh, India"
            },
            "terms": [
                {
                    "offset": 0,
                    "value": "New Delhi"
                },
                {
                    "offset": 11,
                    "value": "Madhya Pradesh"
                },
                {
                    "offset": 27,
                    "value": "India"
                }
            ],
            "types": [
                "locality",
                "political",
                "geocode"
            ]
        },
        {
            "description": "Delhi, NY, USA",
            "matched_substrings": [
                {
                    "length": 5,
                    "offset": 0
                }
            ],
            "place_id": "ChIJVS4Od-R43IkRReeLGEBFcv8",
            "reference": "ChIJVS4Od-R43IkRReeLGEBFcv8",
            "structured_formatting": {
                "main_text": "Delhi",
                "main_text_matched_substrings": [
                    {
                        "length": 5,
                        "offset": 0
                    }
                ],
                "secondary_text": "NY, USA"
            },
            "terms": [
                {
                    "offset": 0,
                    "value": "Delhi"
                },
                {
                    "offset": 7,
                    "value": "NY"
                },
                {
                    "offset": 11,
                    "value": "USA"
                }
            ],
            "types": [
                "locality",
                "political",
                "geocode"
            ]
        }
    ],
    "status": "OK"
}

Baldachin answered 14/4, 2022 at 10:51 Comment(0)

If you are working with react project and using Autocomplete from @react-google-maps/api the following code should work

<Autocomplete
        onLoad={autocomplete => {
          setAutocomplete(autocomplete)
        }}
        onPlaceChanged={handlePlaceSelect}
        options={{
          types: ['(cities)']
        }}
      >
        <input
          type="text"
          placeholder="Enter a location"
          name="location"
          id="location"
          onChange={(e) => setSelectedLocationName(e.target.value)}
        />
      </Autocomplete>

Madson answered 22/3 at 7:0 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

More info:

Recommended topics

Hot tags