Googleマップの自動補完機能が動作しないどうすれば解決できますか？

Question

JSロード：

<script src="https://maps.google.com/maps/api/js?key=AIzaSyC3Ws7EvlZS2PRlNFZfFrqOnlWM_XHYO1o&libraries=places" type="text/javascript"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

HTMLコード：

<input type="text" class="textbox controls" placeholder="Post Code,City" id="cityzip" name="cityzip" value=""> 

JSコード：

<script> 
    $(document).ready(function() { 
     $(function(){ 
      var autocomplete; 
      var geocoder; 
      var input = document.getElementById('cityzip'); 
      var options = { 
      types: ['(regions)'] // (cities) 
      }; 

      autocomplete = new google.maps.places.Autocomplete(input,options); 
     }); 
    }); 
</script> 

JSコードはbodyタグを閉じる前に置きました。ヘッドを閉じる前にGmapsファイルの読み込みを行いました。私はなぜそれが働いていない誰も私を助けてくれることができないのか分からない。

Answer 1

私はバイオリンを作成し、

$(document).ready(function() { 
 
     $(function(){ 
 
      var autocomplete; 
 
      var geocoder; 
 
      var input = document.getElementById('cityzip'); 
 
      var options = { 
 
      types: ['(regions)'] // (cities) 
 
      }; 
 

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

<script src="https://maps.google.com/maps/api/js?key=AIzaSyC3Ws7EvlZS2PRlNFZfFrqOnlWM_XHYO1o&libraries=places" type="text/javascript"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 

 

 

 
<input type="text" class="textbox controls" placeholder="Post Code,City" id="cityzip" name="cityzip" value="">