How can I restrict the Google Maps Places Library's Autocomplete to suggestions of only one city's places?

autocomplete, google-maps, google-maps-api-3, google-places-api

Solution

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.

Problem

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

Original source