Gibt es eine Möglichkeit, Google Places Autocomplete auf die Straßen einer Stadt zu beschränken?

Question

Kann ich die Suche auf die Straßen einer Stadt einschränken, wenn ich Google Places verwende?

Answer 1

Sie können die Autocomplete Optionen geocode als Typ zu verwenden, die die Ergebnisse einschränken werden, die Adressen zurückgegeben werden:

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

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

Es gibt keine Möglichkeit, die Ergebnisse zu nur Straßen zu beschränken, sondern Dies wird weitgehend erreichen, was Sie wollen. Wenn Sie yourBounds richtig einstellen, vielleicht auf das Gebiet einer Stadt beschränkt, wird es Ihnen so nah wie möglich kommen.

Update auf den Kommentar antwortet:

Wenn Sie durch Eingabe einer Stadt beginnen möchten, können Sie die Karte der Grenzen an die Grenzen s Autocomplete binden, die die Karte ihre Ansichtsfenster gesetzt wird automatisch, wenn eine Stadt im Autocomplete ausgewählt ist:

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

Dann können Sie die Typen s Autocomplete‘aktualisieren, ähnlich dem oben, um es Adressen zurückkehren:

autocomplete.setTypes([ "geocode" ]); 

Von dort können Sie die Places Library API Docs lesen.

Answer 2

Ich war auf der Suche nach einer Möglichkeit, Places Autocomplete auf street_number Level zu beschränken, aber nicht gefunden.

Die beste Lösung, die ich finden könnte, ist die street_number Komponente in den Orten zu überprüfen und eine Benachrichtigung an den Benutzer anzuzeigen, wenn es fehlte.

Beispielcode:

var searchbox = document.getElementById('location'); 

var options = {    
    types: ['geocode'] 
}; 

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

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 

     var foundStreet = false; 

     for (var i = 0; i < place.address_components.length; i++) { 
      var c = place.address_components[i]; 

      for (var j = 0; j < c.types.length; j++) 
      { 
       if (c.types[j] == "street_number") 
       { 
        foundStreet = true; 
        break; 
       } 
      } 

      if (foundStreet) 
       break; 
     } 

     if (!foundStreet) 
      alert("Not a valid street number, add some pretty message to the user."); 

     console.log(place); 
    }); 

Answer 3

Nur ein Beispiel von HTML-Code (twitter Bootstrap-3 kompatibel :))

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

Ich denke, der Code selbsterklärend ist, versuchen Sie es einfach

<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

Answer 4

Set-Typen Regionen.

var input = document.getElementById('searchTextField'); 

var options = { 
    bounds: yourBounds, 
    types: ['(regions)'] 
}; 

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

Hoffen, es .. hilft an die Adresse