anpassen Autocomplete-Feld in Google Map api

Question

Ich bin neu in Google Map API, gibt es ein Formular in meinem Projekt & zwei Felder mit Namen Stadt und Adresse. Ich möchte den Standort nur innerhalb dieser Adresse und Stadt suchen. Wie kann ich dies erreichen? Zunächst nehme ich nur ein Feld, d. H. Ort. Aber Grenze beschränkt nicht die Suche. html Teil:

div class="form-group col-md-6 col-sm-6"> 
<span>Location:</span> 
<input type="text" id="search_txt" class="form-control" placeholder="Enter a location" /> 

js Teil:

google.maps.event.addDomListener(window, 'load', function() { 

    var cityBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(18.520430,73.856744) 
); 

var options = { 
    bounds: cityBounds, 
    types: ['(cities)'], componentRestrictions: { country: 'in' } 

}; 
var input = document.getElementById('search_txt'); 
var autocomplete = new google.maps.places.Autocomplete(input, options); 



    }); 

Answer 1

von diesem documentation, um Basierend zur automatischen Vervollständigung zu verwenden, müssen Sie die Google Places-Bibliothek laden.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> 

Hier ist ein example von Google Text & Tabellen:

Dieses Beispiel zeigt eine Adresse Form, mit der Funktion zum automatischen Vervollständigung der Google Places API-Benutzer in den Informationen füllen zu helfen. Dieses Beispiel erfordert die Places-Bibliothek. Schließen Sie den Parameter "libraries = places " beim ersten Laden der API ein. Zum Beispiel:

<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&libraries=places"> 

var placeSearch, autocomplete; 
    var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
    }; 

    function initAutocomplete() { 
    // Create the autocomplete object, restricting the search to geographical 
    // location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
     {types: ['geocode']}); 

    // When the user selects an address from the dropdown, populate the address 
    // fields in the form. 
    autocomplete.addListener('place_changed', fillInAddress); 
    } 

    function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
     document.getElementById(component).value = ''; 
     document.getElementById(component).disabled = false; 
    } 

prüfen diesem Zusammenhang SO Frage: Google Map Autocomplete Form Customization

Answer 2

Zeigen Sie, was Sie bisher getan haben .. Sie weiter auf Link auch

google map api page

Auch haben könnte helfen stieß ich auf dies während der Suche Überprüfen Sie auch diese

Ändern Sie die Grenzen eines bestehenden automatischen Vervollständigung

Anruf setBounds() auf einem vorhandenen automatische Vervollständigung den Suchbereich zu ändern.

// Versetzt das Autocomplete-Objekt auf den geographischen Standort des Benutzers, // wie vom Objekt 'navigator.geolocation' des Browsers geliefert. Geolokalisieren Funktion() {if (navigator.geolocation) { navigator.geolocation.getCurrentPosition (Funktion (Position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var Kreis = new google.maps.Circle ({ Zentrum: geolocation, Radius: position.coords.accuracy }); autocomplete.setBounds (circle.getBounds()); }); mit dem libraries Parameter in der Bootstrap-URL für die Google Maps JavaScript API}}