limit Google maps of countries in the autocomplete list to "INDIA, USA and UK"

Question

This code is not working. Please tell me the exact solution

<script src="maps.googleapis.com/maps/api/…; type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      /* restrict to multiple cities? */
      var options = {
          types: ['(cities)'],
          componentRestrictions: {country: ["usa", "uk"]}
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options); 
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

UPDATE

Multiple countries filter in place autocomplete was introduced in version 3.27 of Maps JavaScript API in January 2017:

You can now restrict Autocomplete predictions to only surface from multiple countries. You can do this by specifying up to 5 countries in the componentRestrictions field of the AutocompleteOptions.

https://developers.google.com/maps/documentation/javascript/releases#327

Answer 1

First of all, you cannot filter from multiple countries. It's a known issue reported here.

Then for your code, you have to use a two characters string for the country code :

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

Here is a one-country working sample I jsfiddled (taken from the Google samples list).

Answer 2

After waiting two years for a solution from google, i've realized a workaround for a new project.

The function is filtering multiple component restrictions and merging the top results to one array. This means the specific result sets are given each after another.

Maybe this solution can be optimized, i.e. the whole result for all countrys or regions should be resorted for the "weight" of administrative regions, citys and streets.

The fiddled script is here.

Main functionality (Multiple requests with a callback afterwards):

       service = new google.maps.places.AutocompleteService();
       var request1 = {
         input: inputData,
         componentRestrictions: {country: 'de'},
       };
       var request2 = {
         input: inputData,
         componentRestrictions: {country: 'at'},
       };
       var request3 = {
         input: inputData,
         componentRestrictions: {country: 'ch'},
       };
       $('#result').empty();
       service.getPlacePredictions(request1, callback);
       service.getPlacePredictions(request2, callback);            
       service.getPlacePredictions(request3, callback);   

Answer 3

here's a work around I've been using by manipulating the positions of multiple auto complete divs:

    var location = $('#location');
var options1 =  { 
                    types: ['(cities)'],
                    componentRestrictions: {country: 'uk'}
                }
var options2 =  { 
                    types: ['(cities)'],
                    componentRestrictions: {country: 'irl'}
                }
if (location.exists()) { 
    $(location).each(function(index){
        new google.maps.places.Autocomplete(this, options2);
        new google.maps.places.Autocomplete(this, options1);
    });
 var pressed = 0;
            google.maps.event.addDomListener(this, 'keydown', function(e){
            if (e.keyCode == 40 || e.keyCode == 38) { 
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
            }
        },true); 
    location.keypress(function(e) {
        setTimeout(function(e){
            setInterval(function(e){
            if($('.pac-container.pac-logo').last().css('display') != 'none' ){
                $('.pac-container.pac-logo').first().children('.pac-item').appendTo($('.pac-container.pac-logo').last())
            }
            else{
                $('.pac-container.pac-logo').last().children('.pac-item').appendTo($('.pac-container.pac-logo').first())
            }
            },100)

        }
        ,300)
    });
}

css:

.pac-container.pac-logo:last-of-type {
     box-shadow: none !important;
}
.pac-container.pac-logo:last-of-type:after {
    content: none !important;
}

Answer 4

Just to update, after the release of version 3.27 of Maps JavaScript API in January 2017, multiple countries filter is possible passing an array of string country codes.

Answer 5

why you not putting radio button/check box etc to get for multiple countries address maybe this will work for you guys. var valueofcountry= "ca"; // suppose this value is coming from checkbox/radio

    var autoCompleteOptions = {componentRestrictions: {country: valueofcountry}};

Answer 6

finally i got solution for this issue.. i hope this code will work..try this

// FOR SPECIFIC COUNTRY 'INDIA' ONLY 
var options = {
    types: ['(cities)'],
    componentRestrictions: {country: "IN"}
};

autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options);
/*  When the user selects an address from the dropdown,
    populate the address fields in the form. */
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
});

// FOR SPECIFIC COUNTRY 'US' ONLY 
var options = {
    types: ['(cities)'],
    componentRestrictions: {country: "US"}
};

autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options);
/*  When the user selects an address from the dropdown,
    populate the address fields in the form. */
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
});