google maps autocomplete bounds not working

Question

I want to use autocomplete bounds on Google maps service. But not working.

//----autocomplete start
var input = (document.getElementById('searchPlace'));
var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(40.518, 29.215),
            new google.maps.LatLng(41.242, 30.370));

var options = {
            bounds:defaultBounds,
            componentRestrictions: { country: 'XX'},};

var autocomplete = new google.maps.places.Autocomplete(input, options);
//----autocomplete end

When I type the textbox, the addresses are coming in XX country. But I wanna restrict the search in a region of country. For example a city bounds. But other addresses are coming out of this bounds. Bounds are not considered.

Answer 1

The problem is that LatLngBounds expects south-west and north-east corners. Also referred as bottom-left and top-right corners.

Instead of:

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.518, 29.215),
    new google.maps.LatLng(41.242, 30.370));

It should be:

var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(41.242, 29.215),
    new google.maps.LatLng(40.518, 30.370));

Answer 2

Updated 10/2018: this answer is obsolete; please see other answers

It will not work as you wish. This is what documentation says:

The area in which to search for places. Results are biased towards, but not restricted to, places contained within these bounds.

https://developers.google.com/maps/documentation/javascript/places-autocomplete#address_forms

Answer 3

Maybe when you are using bounds you cannot use componentRestrictions...

Try this..

    //----autocomplete start
    var input = (document.getElementById('searchPlace'));
    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(40.518, 29.215),
        new google.maps.LatLng(41.242, 30.370));

    var options = {
        bounds:defaultBounds
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    //----autocomplete end

Answer 4

Bounds only works for the maps API, not the Places API.

For location biasing in the Places API you need to use a location latlng object and a radius (in meters) in the options.

        var myLatlng = new google.maps.LatLng(35.9907,-84.0497);

        var acOptions = {
            location: myLatlng,
            radius: 150000,  // (in meters; this is 150Km)
            types: ['address'],
            componentRestrictions: {country: 'us'}
        };

Note that this only biases the autocomplete results to the radius you entered; it does not restrict the results to that radius.

Answer 5

var defaultBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(17.2916377 ,78.2387067),
                new google.maps.LatLng(17.5608321, 78.6223912)
);

var input = document.getElementById('destination');
var options = {
  bounds: defaultBounds,
  types: ['establishment'],
  strictBounds: true
};

var destination_autocomplete = new google.maps.places.Autocomplete(input, options)