Is there a way to restrict the Google Places Autocomplete to search a city's streets?

Question

Can I restrict the search to a city's streets when using the Google Places Autocomplete?

Answer 1

You can set the Autocomplete options to use geocode as the type, which will restrict the results that are returned to addresses:

var input = document.getElementById( 'searchTextField' );
var options = {
  bounds: yourBounds,
  types: ['geocode']
};

autocomplete = new google.maps.places.Autocomplete( input, options );

There is no way to restrict the results to just streets, but this will largely achieve what you want. If you set yourBounds correctly, maybe limited to the area of a city, it will get you as close as currently possible.

Update responding to the comment:

If you want to start by entering a city, you can bind the map's bounds to the Autocompletes bounds, which will have the map set its viewport automatically when a city is selected in the Autocomplete:

var options = {
  bounds: yourBounds,
  types: ['(cities)']
};
autocomplete =
    new google.maps.places.Autocomplete( input, options );
// This will bind the map's bounds to the Autocomplete's bounds:
autocomplete.bindTo('bounds', map);

Then, you can update the Autocomplete's types, similar to the above, to have it return addresses:

autocomplete.setTypes( [ "geocode" ] );

From there, you can have a read of the Places Library API Docs.

Answer 2

Just an example of html code (twitter bootstrap 3 compatible :))

<div class="well container">
    <form role="form">
      <div class="form-group">
        <label for="locality" class="sr-only">Stadt oder PLZ</label>
          <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
          <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p>
      </div>
      <div class="form-group">
        <label for="route" class="sr-only">Straße / Hausnummer</label>
        <div class="row">
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" />
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" />
          </div>
        </div>
      </div>
    </form>
</div>

I think the code is self-explanatory, just try it

<script>
var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['geocode'], //['(cities)'], geocode to allow postal_code if you only want to allow cities then change this attribute
  componentRestrictions: {country: 'de'}
};
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    $('#route').attr('disabled', false).focus();
    $('#street_number').attr('disabled', false);

    var boundsByCity = autocomplete.getPlace().geometry.viewport;
    var routeInput = document.getElementById('route');
    var routeOptions = {
        bounds: boundsByCity,
        types: ['geocode']
    };
    new google.maps.places.Autocomplete(routeInput, routeOptions);
});
</script>

DEMO: JSFIDDLE

Another demo more advanced