Google Places AutocompleteService filtering by country

Question

I'm setting up a custom autocomplete field where I show locations from Google Places and events from my database that match the search query. For this reason, I'm using the Google Places Autocomplete Service to get the query predictions rather than plugging in the Places Autocomplete directly into my textfield.

The problem is I can't figure out how to filter Places Autocomplete suggestions by country using the AutoComplete service.

I've tried:

var service = new google.maps.places.AutocompleteService(null, {
        types: ['cities'],
        componentRestrictions: {country: "au"}
    });

but it still shows autocomplete options from Germany and France:(

Any suggestions?

score 64 · Accepted Answer · answered Mar 09 '13 at 11:56

64

You need to pass the restrictions when you call the service, not when you create it. Here:

//create service
service = new google.maps.places.AutocompleteService();

//perform request. limit results to Australia
var request = {
    input: 'Brisbane',
    componentRestrictions: {country: 'au'},
};
service.getPlacePredictions(request, callback);

answered Mar 09 '13 at 11:56

Robert Dodd

2,148
2
21
28

Hello Robert, how and where did you define your `callback`? – chaeschuechli Aug 31 '16 at 13:23
@chaeschuechli Have a look at the [official example](https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction). The function `displaySuggestions` is the callback. – Robert Dodd Aug 31 '16 at 21:23
1

@Apoorv It might be useful to note that service.getPlacePredictions works when passing the request.componentRestrictions, however the service.getQueryPredictions does not seem to – geedubb Jun 12 '18 at 15:17
can you add restrictions to cities? for example `componentRestrictions: { city: 'nyc'}`? – Steven Aguilar Mar 27 '19 at 16:22
1

`.AutocompleteService()` does not have `strictBounds` parameter. I was wondering if there is a parameter to limit results based on strict bounds. – Steven Aguilar Mar 27 '19 at 16:29
@RobertDodd You can initialize the object adding the options. If you need to change the options, there is a function named `setOptions()` (see the [documentation](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete)) which you can use to perform this action. – KBeDev Jul 28 '20 at 18:39
how to retrieve long and lat from callback result? – Mahmoud Zakal Aug 29 '22 at 09:36

score 8 · Answer 2 · answered Jun 01 '13 at 13:45

You can specify types, and componentRestrictions using AutocompletionRequest. Here is an example -

var service = new google.maps.places.AutocompleteService();

    service.getPlacePredictions({ input: query, types: ['geocode'], 
                                componentRestrictions:{ country: 'us' } },
            function (predictions, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    var results = document.getElementById('results');
                    for (var i = 0, prediction; prediction = predictions[i]; i++) {
                        results.innerHTML += '<li>' + prediction.description + '</li>';
                    }
                }
            });

score 1 · Answer 3 · answered Feb 05 '13 at 04:00

1

As outlined in the documentation reference, the Places Library AutocompleteService does not support AutocompleteOptions. If you think that this would be a valuable feature, please file a Places API - Feature Request.

answered Feb 05 '13 at 04:00

Chris Green

4,397
1
23
21

1

Can you be more specific about where that is outlined in the docs? From what I see, you can restrict by country. – thealexbaron Feb 09 '14 at 00:40
Yes, I also just checked "componentRestrictions" – LeRoy Nov 12 '15 at 12:11

score 0 · Answer 4 · answered Jan 05 '23 at 13:22

0

You can pass array also for country restriction

const autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: '123',
  componentRestrictions: {
    country: ['us', 'ca'],
  },
});

answered Jan 05 '23 at 13:22

Bagrat Zakaryan

317
1
4
20

score -1 · Answer 5 · answered Nov 20 '16 at 16:38

-1

You should use this code.

var options = {
    types: ['(cities)'],
    componentRestrictions: {country: ["in"]}
}
//Find From location    
var input= document.getElementById('input_box_city');
var fromAuto = new google.maps.places.Autocomplete(input, options);

answered Nov 20 '16 at 16:38

santosh devnath

144
6

1

This is for the Autocomplete class, not the AutocompleteService class. The AutocompleteService class allows you to programatically deal with the results whereas the Autocomplete class decorates an input element for you. – GuruBob Oct 26 '17 at 19:31

score -1 · Answer 6 · edited Jul 31 '17 at 07:57

Use this working Code

var input = document.getElementById("query_value");
var autocomplete = new google.maps.places.Autocomplete(input, {
  componentRestrictions: { country: "IN" },
  place_id: "YOUR_PLACE_ID"
});
google.maps.event.addListener(autocomplete, "place_changed", function() {
  var place = autocomplete.getPlace();
});


https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en&key=YOUR_KEY

Google Places AutocompleteService filtering by country

6 Answers6

Linked