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

Lefton

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/

Hanahanae

Hi, is there any way to do the same functionality without displaying the prefix. – Pugliese

To do this, you need get result of search request from google and render your own autocomplete widget. Look here #9277080 – Hanahanae

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

Duplicity

is it the last/final solutions to filter the results on city basis.was anyone able to do more concrete hack/workaround for this. – Cephalic

There is a feature request in public issue tracker code.google.com/p/gmaps-api-issues/issues/detail?id=4433. However, it looks like Google didn't set a high priority on this task. So bounds biasing is the only option at the moment. – Gourley

Hi this is not working for me, can you please help. I have given country as "in" (India) and I've given the bounds of Hyderabad (city in India). But it's showing localities from other cities also. – Pugliese

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

Misrule