Google autocomplete automatically limits a specific area

Question

My requirement is to get google autocomplete offer only for Bangalore places, but I do not get places only for Bangalore or within latitude longitude.

I want to retireve just below the image in the autocomplete text box.

can someone plz suggest how to achieve the same and where I am going wrong.

JavaScript:

<script type="text/javascript"> function initialize1() { var southWest = new google.maps.LatLng( 12.97232, 77.59480 ); var northEast = new google.maps.LatLng( 12.89201, 77.58905 ); var bangaloreBounds = new google.maps.LatLngBounds( southWest, northEast ); var options = { bounds: bangaloreBounds, types: ['(cities)'], componentRestrictions: {country: 'in'} }; var input = document.getElementById('searchTextFieldTo'); var autocomplete = new google.maps.places.Autocomplete(input, options); } google.maps.event.addDomListener(window, 'load', initialize1); </script> 

TextField:

 <input type="text" id="searchTextFieldTo" class="ui-timepicker-hour" style="width:350px;text-align:left;font-style:italic;" placeholder="Enter To location" autocomplete="on" /> 

Answer 1

As mentioned in my answer here :

It is not currently possible to limit the results to a specific location. You can use borders, as you did above, to shift the results to the side, but not limited to the places contained in the specified borders.

If you think that restricting by region would be a useful feature, send the Places API - Feature Request .

EDIT: According to 2018-07. It is possible to determine the types of places to be extracted, for example cities (which are locality or administrator_area3 according to the API). Check out the full answer here .

Answer 2

I think you can try this.

 var bangaloreBounds = new google.maps.LatLngBounds( new google.maps.LatLng(12.864162, 77.438610), new google.maps.LatLng(13.139807, 77.711895)); var autocomplete = new google.maps.places.Autocomplete(this, { bounds: bangaloreBounds, strictBounds: true, }); autocomplete.addListener('place_changed', function () { }); 

Note: the strictBounds parameter was added to version 3.27 of the JavaScript Maps API, which is currently (January 2017) an experimental version.

Answer 3

Google provides two ways to achieve this. If you are not comfortable, because in countries such as India, this does not work well, because there are no rectangular or structural borders in states and states.

1.LatLngBounds (LatLng southwest, LatLng northeast):. Here you can highlight latitude and longitude to form a rectangle.

2. Location (Lat, Lng) and Radius:. Here you can specify latitude and longitude to form a circle.

But the problem with these approaches does not give the expected results if you are from countries such as India, where states and states do not have structured forms (Rectangular), as in the USA.

If you are faced with the same problem as there is a hack. With jQuery / Jacascript, you can attach functions that will sequentially save the city name in text input, which is limited by the Places API Autocomplete object.

Here he is:

 <script> $(document).ready(function(){ $("#locality").val(your-city-name) //your-city-name will have city name and some space to seperate it from actual user-input for example: "Bengaluru | " }); $("#locality").keydown(function(event) { //locality is text-input box whixh i supplied while creating Autocomplete object var localeKeyword = "your-city-name" var localeKeywordLen = localeKeyword.length; var keyword = $("#locality").val(); var keywordLen = keyword.length; if(keywordLen == localeKeywordLen) { var e = event || window.event; var key = e.keyCode || e.which; if(key == Number(46) || key == Number(8) || key == Number(37)){ e.preventDefault(); }//Here I am restricting user to delete city name (Restricting use of delete/backspace/left arrow) if length == city-name provided if(keyword != localeKeyword) { $("#locality").val(localeKeyword); }//If input-text does not contain city-name put it there } if(!(keyword.includes(localeKeyword))) { $("#locality").val(localeKeyword); }//If keyworf not includes city name put it there }); </script> 

(Image :) Before this hack

(Image :) After this hack

Answer 4

 function initialize() { var bangaloreBounds = new google.maps.LatLngBounds( new google.maps.LatLng(12.864162, 77.438610), new google.maps.LatLng(13.139807, 77.711895)); var options = { bounds: bangaloreBounds, componentRestrictions: {country: 'in'}, strictBounds: true, }; var input = document.getElementById('autocomplete'); var autocomplete = new google.maps.places.Aut'enter code here'ocomplete(input, options); } google.maps.event.addDomListener(window, 'load', initialize); 

Answer 5

As in the current documentation for the Google Javascript Addresses API here , you can define an array of types of places to be extracted. In the example below, I configured it to receive only cities (which, according to the API, locality or administrator_area3). You can configure the search for regions, addresses, establishments and geocodes.

 function initMap() { var input = document.getElementById('my-input'); var options = { types: ['(cities)'] }; var autocomplete = new google.maps.places.Autocomplete(input, options); // the rest of the code ... }