How can I limit the auto-completion of the Google Maps Map Library to the offers of only one city?

Question

I currently use this code, but this restricts offers to only one country. I saw one implementation, but its use is 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 the bounds property to the options object that you pass 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 borders to Autocomplete controlled by the current map view, you can map the map borders to the Autocomplete as follows:

 autocomplete.bindTo('bounds', map); 

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

 autocomplete.setBounds( someOtherBounds ); 

This may mean that you are creating a default city, as is the case with Hyberabad in the example above. Or you let your users choose from a list of cities to start, and then set the map view to the selected city. Autocomplete offer city names if you start with componentRestrictions country 'PK' , as you already do. You will know what is best for your application.

Finally, it really does not completely and completely limit Autocomplete just the city, but it will achieve the result you want, as much as possible at the moment.

Answer 2

I found amazing examples of restricting or limiting country search results using the Autocomplete class, i.e. there is a method called setComponentRestrictions that allows you to specify the country (property) found here -https: //developers.google.com./maps/documentation/JavaScript/link # ComponentRestrictions

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