How to make city only autocomplete input based on google api

Question

I am new google places auto complete api. I want to self complete for only cities. When you enter a city such as London, London city can be visible but also another places can be visible.I dont want these that are related to not city name.In short, I want self complete works with only city names. Below is my code. I am unable to correct code. Please help me

   var input = document.getElementById(inputId);

   var options = {types:['(cities)'],componentRestrictions: {}}; 


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

Use bindTo() to bias the results to the map's viewport, even while that viewport changes.

autocomplete.bindTo('bounds', map);

Then to restrict the search to a specific country, use the componentrestrictions