google place autocomplete国の変更が制限されています

Question

私は場所を自動補完して地図上に経路を見つけています。新しい国の価値フォーム選択ボックスで：{iso_country国}

は、私が選択ボックスの変更 iはオートコンプリート入力をクリアし、オートコンプリート componentRestrictions =を設定して2カ国、米国とAU.Whenと選択ボックスがあります。

スクリプトを最初に読み込むと、デフォルトの国はUSで、オートコンプリートではAUの場所が示唆されません。 （これまでのところ良い）

私が最初にスクリプトを読み込んで国をAUに直接変更すると、オートコンプリートが提案され、米国から来ます。 （これは私が欲しいものではないで）

ここに私のコードでは、誰も私がこの問題を解決する手助けすることができ

/* 
* When initialize 
* i apply autocomplete to the inputs 
*/ 

if($("#from_place").length) 
{ 
     apply_autocomplete($("#from_place")[0],default_iso_code); 
    } 
    if($("#to_place").length) 
{ 
     apply_autocomplete($("#to_place")[0],default_iso_code); 
} 


/* 
* When the Select Box change 
* i apply autocomplete to the inputs again with new iso_country 
*/ 

$(document).on('change','#map_country_id',function() 
{ 
    var iso_country = $(this).val(); 

    //clear from/to 
    $("#from_place").val(''); 
    $("#to_place").val(''); 

    //autocomplete from/to with new country 
    if($("#from_place").length) 
    { 
     apply_autocomplete($("#from_place")[0],iso_country); 
    } 
    if($("#to_place").length) 
    { 
      apply_autocomplete($("#to_place")[0],iso_country); 
     } 
}); 

/* 
* the function that applies the autocomplete 
* 
*/ 

function apply_autocomplete(input,iso_country) 
{ 
    var options = { 
     componentRestrictions: {country: iso_country} 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options);  
    autocomplete.bindTo('bounds', map); 
} 

です。

Answer 1

私は、選択ボックスの各変更イベントでオートコンプリートの新しいインスタンスを作成しようとしていることが原因と考えています。私はnew演算子を呼び出さず、オートコンプリートクラスのsetOptions()メソッドを使用して、既存のオートコンプリートインスタンスのプロパティを更新することをお勧めします。

https://developers.google.com/maps/documentation/javascript/reference#Autocomplete

次の例を見てください。私は2つの機能を作成しました：地図のJavaScript APIをロードした後に実行し、選択ボックスの各変更イベントに呼ばれているオートコンプリート要素

updateAutocomplete(countryCode)機能の初期状態を設定されて

• initAutocomplete()

var default_iso_code = 'US'; 
 
var autocomplete_from, autocomplete_to; 
 

 
function initAutocomplete() { 
 
    var options = { 
 
     componentRestrictions: {country: default_iso_code} 
 
    }; 
 
    if($("#from_place").length) { 
 
    autocomplete_from = new google.maps.places.Autocomplete($("#from_place")[0], options); 
 
    } 
 
    if($("#to_place").length) { 
 
    autocomplete_to = new google.maps.places.Autocomplete($("#to_place")[0], options); 
 
    } 
 

 
    $(document).on('change','#map_country_id',function() { 
 
    var iso_country = $(this).val(); 
 

 
    //clear from/to 
 
    $("#from_place").val(''); 
 
    $("#to_place").val(''); 
 

 
    updateAutocomplete(iso_country); 
 
    }); 
 
} 
 

 
function updateAutocomplete(countryCode) { 
 
    var options = { 
 
     componentRestrictions: {country: countryCode} 
 
    }; 
 
    if (autocomplete_from) { 
 
    autocomplete_from.setOptions(options); 
 
    } 
 
    if (autocomplete_to) { 
 
    autocomplete_to.setOptions(options); 
 
    } 
 
}

#from_place, #to_place { 
 
    position: relative; 
 
    width: 480px; 
 
} 
 
#autocomplete { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 99%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="locationField"> 
 
     <select id="map_country_id"> 
 
     <option value="US">United States</option> 
 
     <option value="AU">Australia</option> 
 
     </select> 
 
     <br/> 
 
     <br/> 
 
     <input id="from_place" placeholder="From place" type="text"></input> 
 
     <input id="to_place" placeholder="To place" type="text"></input> 
 
</div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initAutocomplete" async defer></script>

こちらがお役に立てば幸いです。