CODEWITHSUNDEEP
google-places-api
jeznag
jeznag

Reputation: 4723

Google Places AutocompleteService filtering by country

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?

Upvotes: 22

Views: 37266

Answers (6)

Bagrat Zakaryan
Bagrat Zakaryan

Reputation: 325

You can pass array also for country restriction

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

Upvotes: 0

Apoorv
Apoorv

Reputation: 1389

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

Upvotes: -1

santosh devnath
santosh devnath

Reputation: 172

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

Upvotes: -1

Ben W
Ben W

Reputation: 2479

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>';
                    }
                }
            });

Upvotes: 8

Robert Dodd
Robert Dodd

Reputation: 2187

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

Upvotes: 66

Chris Green
Chris Green

Reputation: 4427

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.

Upvotes: 1

Related Questions