How to restrict google places to specific city

Question

I am currently able to restrict places to only one country, but I also want to restrict on a specific city also. Any ideas how to achieve that? This is my current code:

var autocomplete,
                    options = {
                        types: ['geocode'],
                        componentRestrictions: {country: 'est'}
                    };
                autocomplete = new google.maps.places.Autocomplete(input, options);
                google.maps.event.addListener(autocomplete, 'place_changed', function () {
                    var place = autocomplete.getPlace().formatted_address;
                    $(input).attr('value',place);
                });

Answer 1

As Luke said the places autocomplete allows you to use componentRestrictions to filter by country only.

But you can use a little trick with a search request string. Just add prefix with city name in request.

var prefix = 'Kyiv, ';

$(input).on('input',function(){
    var str = input.value;
    if(str.indexOf(prefix) == 0) {
        // string already started with prefix
        return;
    } else {
        if (prefix.indexOf(str) >= 0) {
            // string is part of prefix
            input.value = prefix;
        } else {
            input.value = prefix+str;
        }
    }
});

http://jsfiddle.net/24p1et98/

Answer 2

Places Autocomplete currently allows you to use componentRestrictions to filter by country. What I would do in your situation is to use the options argument to filter by the bounds that define the city in question:

var cityBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(25.341233, 68.289986),
  new google.maps.LatLng(25.450715, 68.428345));

var options = {
  bounds: cityBounds,
  types: ['geocode'],
  componentRestrictions: {country: 'est'}
};

Answer 3

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 keyword not includes city name put it there
});