Googleマップapiのオートコンプリートフィールドをカスタマイズします

Question

私はGoogleマップapiには新しく、&という名前の都市と住所の2つのフィールドがあります。私はその住所と都市内の場所だけを検索したいと思います。私はこれをどのように達成することができますか？最初は1つのフィールド、つまりlocation.butは検索を制限しません。 HTML部分：

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一部：

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

オートコンプリートを使用するためには、GoogleマップのJavaScript APIブートストラップURLでlibrariesパラメータを使用してGoogleプレイスライブラリをロードする必要があります、このdocumentationから基づいています。ここで

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

は、Googleドキュメントからexampleです：

この例では、ユーザーが情報を入力するために役立つGoogleプレイスAPIのオートコンプリート機能 を使用して、アドレスのフォームを表示します。この 例には、Placesライブラリが必要です。最初にAPIを読み込むときにlibraries = places パラメータを含めます。たとえば：

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

チェックは、この関連のSOの質問：Google Map Autocomplete Form Customization

Answer 2

は、あなたがこれまでに行っているかを示す。..このリンクをチェックも

google map api page

を助けるかもしれない。また私が出会ってきましたこれを検索中にこれもチェックしてください

変更既存のオートコンプリート

コールsetBounds（）の境界は、既存の オートコンプリート上の検索エリアを変更します。

//オートコンプリートオブジェクトをユーザーの地理的位置にバイアスする、 //ブラウザの「navigator.geolocation」オブジェクトによって提供される//。 関数geolocate（）{IF（navigator.geolocation）{ navigator.geolocation.getCurrentPosition（関数（位置）{ VARジオロケーション= { LAT：position.coords.latitude、 LNG：position.coords.longitude }。 VAR円=新しいgoogle.maps.Circle（{ 中心：ジオロケーション、 半径：position.coords.accuracy }）; autocomplete.setBounds（circle.getBounds（））;} ）。 }}