CODEWITHSUNDEEP
jquerygoogle-maps-api-3google-places-api
Vade
Vade

Reputation: 2029

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

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 address input. i have spent some time looking around the internet and spent some time playing with the google maps V3 places autocomplete plugin.

there is something i dont quite understand on the api docs which i was hoping someone might be able to clear up for me, aswell as maybe point me in the right direction.

in the docs it says this:

the (regions) type collection instructs the Place service to return any result matching the following types:

locality
sublocality
postal_code
country
administrative_area1
administrative_area2

this is what i currently dont understand, i live in cornwall (bodmin to be exact) and i want to make the results bias to bodmin. i have done the following:

var input = document.getElementById('inputOne');
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(50.423394,-4.803829),
  new google.maps.LatLng(50.508623,-4.692593));

        //need to set bounds to cornwall/bodmin
        var options = {
            bounds: defaultBounds,
          types: ['geocode'],
          componentRestrictions: {country: 'GB'}
        };
var autocomplete = new google.maps.places.Autocomplete(input,options);

now this works but if for example i enter "st n" i would expect it to first come up with st nicolas street which is in bodmin. but it will come up with things like st neot which is several miles away.

there is part of me that thinks that i need to set the type to a different value, but i am pretty stumped right now.

EDIT: Example of what i am trying to achieve is on the maps.google.com page if you enter ,Bodmin then move the cursor before the comma and start to type a street name or even Asda it will keep it local to what is in that area. i would prefer not to have to type the ,bodmin but that is something which i could work around

if anyone has any ideas that would be awesome. then i will need to figure out how the user can put in some values like "Asda" and get the local asda address.

Upvotes: 6

Views: 15469

Answers (4)

Urfeena
Urfeena

Reputation: 1

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!

Upvotes: 0

Prabhagaran
Prabhagaran

Reputation: 3700

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

Upvotes: 3

ramiz4
ramiz4

Reputation: 81

<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

Upvotes: 0

Chris Green
Chris Green

Reputation: 4427

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.

Upvotes: 4

Related Questions