Is it possible to give a bounding box to RESTful Google Places API?

I'd like to use either Google Places API or it's autocomplete feature to find places in a single district, using bounds (retrieved from Google with a Maps API geocoding call).

The autocomplete API has an example of using bounds in开发者_运维知识库 here but that does not seem to work using my coordinates or the original example 'as is' (just the API key replaced).

So: my question is that would it be possible to provide a bounding box to places API search for retrieving places inside a single town? If possible, the autocomplete API would be neater to use.

I ran into the same issue and solved it using the callback function during the submit. This isn't ideal as it still allows users to select invalid places, but then I validate during the submit. It would be nice if they provided a callback on the autocomplete function (maybe they do, and I just don't see it).

For insance, I have a pretty simple form that searches destinations based on cities:

Choose a City: [ San Francisco ]
Choose a Destination: [ Autocomplete Google Places API textbox  ]
[Submit Button]

First I setup my city select list (I am using ASP.NET MVC here, but you get the idea):

<select id="citySelectId" title="Select a city">
    @foreach (var city in Model.AvailableCities)
    { 
        <option value="@city.CityId"
                data-ne-latitude="@city.NorthEastPos.Latitude" 
                data-ne-longitude="@city.NorthEastPos.Longitude" 
                data-sw-latitude="@city.SouthWestPos.Latitude" 
                data-sw-longitude="@city.SouthWestPos.Longitude" 
                @(Model.SelectedSearchCityId == @city.CityId ? "SELECTED" : string.Empty)>@city.CityState</option>
    }
</select>

Then, I setup a jquery change on the city select list to update my autocomplete:

$("#citySelectId").change(onSelectChange);

The call onSelectChange is pretty straight forward:

function onSelectChange() {
    $('#destinationInputId').val("");

    var selected = $("#citySelectId option:selected");
    var nelat = selected[0].getAttribute('data-ne-latitude');
    var nelng = selected[0].getAttribute('data-ne-longitude');
    var swlat = selected[0].getAttribute('data-sw-latitude');
    var swlng = selected[0].getAttribute('data-sw-longitude');

    var cityLatLngBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng)
    );

    if (autocomplete == undefined) {
        autocomplete = new google.maps.places.Autocomplete(destinationInput, { bounds: cityLatLngBounds });
    } else {
        autocomplete.setBounds(cityLatLngBounds)
    }

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        if (!inCityBounds(place.geometry.location.lat(), place.geometry.location.lng())) {
            popError("The destination you selected (" + place.name + ") does not fall within the city bounds");
        }
    });
};

And the inCityBounds is really easy:

function inCityBounds(lat, long) {
    var selected = $("#citySelectId option:selected");
    var nelat = selected[0].getAttribute('data-ne-latitude');
    var nelng = selected[0].getAttribute('data-ne-longitude');
    var swlat = selected[0].getAttribute('data-sw-latitude');
    var swlng = selected[0].getAttribute('data-sw-longitude');

    var cityLatLngBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng)
    );

    var destination = new google.maps.LatLng(lat, long);

    return cityLatLngBounds.contains(destination);
};

The popError() function, simply shows some error message:

$('#errorSpanId').html(errorMsg).show();

And then my validation/submit code checks it again, and returns false if the item isn't within bounds.

Hope this helps