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

Question

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

Answer 1

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.