Googleの自動ロケーションのドロップダウンリストが表示されない

Question

私はソースの場所と目的地の入力フィールドをクリックすると、Googleの自動ロケーションは表示されません....したがって、入力フィールドは結果をフェッチしていますが、ドロップダウンが表示されません..

私は何をすべきですか？

私のスクリプトは以下の通りです：

<script src="https://maps.googleapis.com/maps/api/js?key=<API KEY>&libraries=places"></script> 
<script> 
    function init() { 
      var options = { 
      componentRestrictions: {country: "au"}}; 
      var input = document.getElementById('locationTextField'); 
      var input2 = document.getElementById('locationTextField2');var input3 = document.getElementById('location1'); 
      var input4 = document.getElementById('location2'); 
      var autocomplete = new google.maps.places.Autocomplete(input,options); 
      var autocomplete2 = new google.maps.places.Autocomplete(input2,options); 
      var autocomplete3 = new google.maps.places.Autocomplete(input3,options); 
      var autocomplete4 = new google.maps.places.Autocomplete(input4,options); 
     } 

     google.maps.event.addDomListener(window, 'load', init); 


    </script> 

Answer 1

希望は、これは動作します：

私の働きリンクはbelow..youは、リンクを参照してください、との問題をfigureoutできることです

自動入力用のHTML入力フィールド。

<input placeholder="location" onFocus="init(this);"> 

JSコード。

var options = { 
    types: ['(cities)'], 
    componentRestrictions: {country: "in"}, 
    strictBounds:true 
}; 

function init(input) { 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
    autocomplete.addListener('place_changed', function() { 
     var place = autocomplete.getPlace(); 
     console.log(place); 
    }); 
} 

<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&libraries=places" async defer></script>