google places autocomplete restrict to particular area

Question

My requirement is to get google places autocomplete suggestion only for Bangalore places, but I am not getting places only for Bangalore or within mention latitude longitude.

I want to retireve only below image places in autocomplete textfield.

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" />

Solution 1

As mentioned in my answer here:

It is currently not possible to restrict results to a specific locality. You can use bounds as you have done so above to bias results towards, but not restricted to places contained within the specified bounds.

If you believe restriction by locality would be a useful feature please file a Places API - Feature Request.

EDIT: As per 2018-07 it's possible to define the types of places to be retrieved, like cities (which are locality or administrative_area3 according to the API). Check out full answer here.

Solution 2

Google Provides two ways to achieve this. If you are not satisfied because in countries like India it do not work well, because states and provisions here do not have rectangular or structure boundaries.

1.LatLngBounds (LatLng southwest, LatLng northeast): Where you can give latitude and longitude to form an rectangle.

2. Location (Lat,Lng) & Radius: Where you can give latitude and longitude to form a circle.

But the problem with these approaches they do not provide expected results if you are from countries like India, where states and provisions are not in structured shapes (Rectangular) as in USA.

If you are facing same issue than there is an hack. With jQuery/Jacascript, you can attach functions which will consistently maintain city name in text input which is bounded with Autocomplete object of Places API.

Here it 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

Solution 3

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 form xomena: strictBounds option was added in version 3.27 of Maps JavaScript API which is currently (January 2017) the experimental version.

Solution 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.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);

View more solutions

Comments

[dlsso]

Here is a similar issue that people can vote for (restrict to state). If anyone finds or adds a more general restric to locality type feature request please let me know and I will star it.

[Greg Eremeev]

I'm looking for able to force restrict results by particular locality, but unfortunately google places api don't support this feature.

[Suraj Mohata]

How did you get this bangaloreBounds vaalues? and where can we mention the radius