Google Places Limit. AutoComplete Service () in Country in Angular - Doesn't Work

Question

I am trying to use the Google Places api to return autocomplete results that are limited only by country (in my case, USA), but the service does not seem to use the componentRestriction property. I did not find anyone else with this problem, so I think this is a problem with my code. In addition, I use angular for the application, but I could not figure out how this would affect the web service.

Here is basically what I have:

HTML:

<input ng-model="query" ng-keyup="getPredictions(query)"> 

JS:

 var autoComplete = new google.maps.places.AutocompleteService(); $scope.getPredictions(query){ var searchObj = { input: query, componentRestrictions: {country: 'us'}, types: '(cities)' }; autoComplete.getQueryPredictions(searchObj, function(predictions, status) { //... $scope.response = predictions; }); }; 

The "types" filter works, but component restrictions are not.

I also installed a fiddle to demonstrate: http://jsfiddle.net/jdalton308/cLtyv803/7/

Thanks for any help.

Answer 1

According to the documentation, getQueryPredictions() accepts a QueryAutocompletionRequest object, which simply does not have the componentRestrictions property.

So, if you want to use componentRestrictions , you need to use the getPlacePredictions() method with accepts AutocompletionRequest object.

This should work:

 autoComplete.getPlacePredictions(searchObj, function(predictions, status) { //... $scope.response = predictions; });