Google map api autocomplete restricted/bias to street address in my town

Question

I am trying to write a web application for my final year project at uni, and one of the first problems i need to tackle is getting an auto complete text box for local addres

Answer 1

set types to regions.

    var options = {
        bounds: defaultBounds,
       types: ['(regions)'],
       componentRestrictions: {country: 'GB'}
     };
    var autocomplete = new google.maps.places.Autocomplete(input,options);

Hope it works..

Answer 2

var input = document.getElementById('inputSearch');
var cityBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(12.864162, 77.438610),
        new google.maps.LatLng(13.139807, 77.711895));
var options = {
        bounds: cityBounds,
        strictBounds: true,
        componentRestrictions: {country: 'in'}
    };
var inputBox = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(inputBox, 'place_changed', function() {
        var place = inputBox.getPlace();
        console.log(place.geometry.location.lat() +', '+ place.geometry.location.lng());
    });

This works great for me!

Answer 3

It is currently not possible to restrict results to a specific locality except for using bounds as you have done so above. This however, only biases results towards, but not restricted to places contained within the specified bounds.

If you believe result by locality would be a useful feature please file a Places API - Feature Request.

As you mentioned, if you type ,Bodmin at the end of your query it is more likely to return local results. A temporary solution might be to use the AutocompleteService and append ,Bodmin to the end of the getPlacePredictions() requests input parameter.

Answer 4

<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>

<script>
var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['geocode'], //['(cities)'], geocode to allow postal_code
  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