Restricting Google places.AutocompleteService() to a country in Angular - Not Working

Question

I have been trying to use the Google Places api to return autocomplete results that are limited to just a country (in my case, the US), but the service does not seem to be using the componentRestriction property. I haven't found anyone else having this problem, so I am thinking it is a problem with my code. Also, I am using angular for the app, but I couldn't see how that would be affecting 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 is working, but the componentRestrictions is not.

I also set-up a fiddle to demonstrate: http://jsfiddle.net/jdalton308/cLtyv803/7/

Thanks for any help.

Answer 1

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

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

This should work:

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