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

Question

J'essaie d'écrire une application web pour mon projet de fin d'études à l'université, et l'un des premiers problèmes que je dois résoudre est d'obtenir une zone de texte auto-complète pour la saisie d'une adresse locale. J'ai passé un peu de temps à chercher sur internet et à jouer avec le plugin d'auto-complétion des lieux de google maps V3.

Il y a quelque chose que je ne comprends pas bien dans la documentation de l'api et j'espérais que quelqu'un pourrait m'éclairer, et peut-être m'indiquer la bonne direction.

dans la documentation, il est dit ceci :

la collection de types (régions) indique au service Place de renvoyer tout résultat correspondant aux types suivants :

locality
sublocality
postal_code
country
administrative_area1
administrative_area2

C'est ce que je ne comprends pas, j'habite en Cornouailles (bodmin pour être exact) et je veux que les résultats soient biaisés pour bodmin. j'ai fait ce qui suit :

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

Cela fonctionne, mais si, par exemple, j'entre "st n", je m'attendais à ce que l'on trouve d'abord st nicolas street, qui se trouve à Bodmin, mais on trouve des choses comme st neot, qui se trouve à plusieurs kilomètres de là.

Une partie de moi pense qu'il faut que je mette le type à une valeur différente, mais je suis assez perplexe pour l'instant.

EDIT : L'exemple de ce que j'essaie de réaliser est sur la page maps.google.com si vous entrez ,Bodmin puis déplacez le curseur avant la virgule et commencez à taper un nom de rue ou même Asda cela restera local à ce qui se trouve dans cette zone. je préférerais ne pas avoir à taper ,bodmin mais c'est quelque chose que je peux contourner.

Si quelqu'un a une idée, ce serait génial. Ensuite, je devrai trouver un moyen pour que l'utilisateur puisse entrer des valeurs telles que "Asda" et obtenir l'adresse locale d'Asda.

Answer 1

Il n'est actuellement pas possible de restreindre les résultats à une localité spécifique, sauf en utilisant des limites comme vous l'avez fait ci-dessus. Toutefois, cela ne fait que biaiser les résultats vers les lieux contenus dans les limites spécifiées, sans toutefois les restreindre.

Si vous pensez qu'il serait utile de disposer de résultats par localité, veuillez déposer un API Lieux - Demande de fonctionnalité .

Comme vous l'avez mentionné, si vous tapez ,Bodmin à la fin de votre requête, il est plus probable que vous obteniez des résultats locaux. Une solution temporaire pourrait consister à utiliser la fonction Service d'autocomplétion et ajouter ,Bodmin jusqu'à la fin du getPlacePredictions() demande un paramètre d'entrée.

Answer 2

Définir les types à régions .

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

J'espère que cela fonctionnera.

Answer 3

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

Démonstration : jsfiddle

Answer 4

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());
    });

Cela fonctionne très bien pour moi !