9

I am currently using the given code, but this only restricts suggestions to one country. I have seen one implementation but its using jQuery and I want to do it without using jQuery.

var input = document.getElementById('searchTextField');
var options = {
    //types: ['(cities)'],
    componentRestrictions: { country: 'pk' }
};
var autocomplete = new google.maps.places.Autocomplete( input, options );
Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
Naqi
  • 252
  • 1
  • 2
  • 10

3 Answers3

23

Try adding a bounds property to the options object you are passing to the Autocomplete constructor, as shown in this code:

var southWest = new google.maps.LatLng( 25.341233, 68.289986 );
var northEast = new google.maps.LatLng( 25.450715, 68.428345 );
var hyderabadBounds = new google.maps.LatLngBounds( southWest, northEast );

var options = {
    bounds: hyderabadBounds,
    types:  ['establishment [or whatever fits your usage]'],
    componentRestrictions: { country: 'pk' }
};

If you want the Autocomplete bounds to be driven by the current viewport of the map, you can bind the bounds of the map to the Autocomplete this way:

autocomplete.bindTo('bounds', map);

Or, if it works better in your application, you also have the option to set the bounds explicitly whenever necessary:

autocomplete.setBounds( someOtherBounds );

This may mean that you create a default city, as I did with Hyberabad in the example above. Or that you allow your users to select from a list of cities to start and then set the map viewport to the selected city. The Autocomplete will suggest city names if you start out with just the componentRestrictions of country 'PK' as you are already doing. You will know what works best for your application.

Finally, this does not truly and completely restrict the Autocomplete to just the city, but it will achieve the result you wish as closely as currently possible.

Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
  • http://hittheroad.ie/ allows autocomplete only in ireland and no other suggestions. how is this possible? – ihimv Oct 22 '15 at 06:40
  • Sorry for this silly question, but how do I find the bounds for a specific city in a country? – SiddAjmera Mar 26 '16 at 12:29
  • @SiddharthAjmera: It's not silly, but you will get better results if you: open a new question, provide more detail about exactly what you are trying to achieve, include an example of your current code, and explain why that code is not working. – Sean Mickey Mar 28 '16 at 15:02
  • for the javascript sdk for autocomplete geo bounds is not working.can you point my error, or if this is depriciated autocomplete = new google.maps.places.Autocomplete( (document.getElementById('loc')), { types: ['geocode'], bounds: cityBounds, cities: [cc], componentRestrictions: { country: 'in', city: cc } }); – user3775217 Jun 06 '16 at 10:00
  • @user3775217: I will be happy to take a look and try to help, but you should post a new question - adding a new item as a comment on an existing question isn't the way it works on stackoverflow. I'm not giving you a hard time; just trying to help you get the hang of how everything works. – Sean Mickey Jun 06 '16 at 21:21
2

I found awesome examples of restricting or limiting search results by country using the Autocomplete class, i.e. there is a method called setComponentRestrictions which allows you to set the country (property), found here -https://developers.google.com/maps/documentation/javascript/reference#ComponentRestrictions

Please check out https://code.google.com/p/gmaps-samples-v3/source/browse/trunk/places/2012-may-hangout/autocomplete.html?r=290 for examples.

Rommel Paras
  • 325
  • 6
  • 20
1

For multiple country restrictions you can use 

var options = {
    types: ['(cities)'],
    componentRestrictions: {
        country: ['de','at','ch']
    }
};
Paul Beck
  • 2,675
  • 1
  • 12
  • 14