CODEWITHSUNDEEP
jquerygoogle-maps
Manoj Thakur
Manoj Thakur

Reputation: 39

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

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

Upvotes: 2

Views: 19825

Answers (5)

guillermogfer
guillermogfer

Reputation: 372

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.

Upvotes: 3

nedo
nedo

Reputation: 128

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

Upvotes: 4

metamagikum
metamagikum

Reputation: 1358

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

Upvotes: 4

Tony Stark
Tony Stark

Reputation: 54

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

Upvotes: -2

Zakaria
Zakaria

Reputation: 15070

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

Upvotes: 5

Related Questions