Googleマップ検索ボックス外の地図は機能していません

-1

Googleフィールド検索マップのようなフィールド検索ボックスの作成方法を探しています。そして私は@MrUpsidownによって答えた正しい答えhereを見つけました。これは@MrUpsidown jsfiddleによるjsfiddleの答えであり、それは完全に動作します。それから私は私のプロジェクトにそれを実装しようとしますが、うまくいきません。Googleマップ検索ボックス外の地図は機能していません

ここに私のコード：

<!DOCTYPE html> 
<html> 
<head> 
<title> 
    Search Box Map 
</title> 
<style> 
    #autocomplete { 
    width:300px; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places" ></script> 
<script> 

    function initialize() { 

    new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), { 
     types: ['geocode'] 
    }); 
    } 

    initialize(); 

</script> 
</head> 

<body> 

<input id="autocomplete" placeholder="Enter your address" type="text"></input> 


</body> 
</html>

私はコードを以下のが、まだ働いていませんよ。私はどこかで行方不明ですか？

出典

2016-12-02 Fai Zal Dong

DOMがレンダリングされた後にの後にinitializeに電話する必要があります。現在、<input>要素が存在する前に、文書の先頭にそれを呼び出しています。

<input> html要素がドキュメントまたはonloadイベント（onload関数でJavaScriptを実行している参照）で定義された後に呼び出します。

<style> #autocomplete { width: 300px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places"></script> <script> function initialize() { new google.maps.places.Autocomplete( (document.getElementById('autocomplete')), { types: ['geocode'] }); } </script> <input id="autocomplete" placeholder="Enter your address" type="text"></input> <script> initialize(); </script>

出典

2016-12-02 01:35:34 geocodezip

それは働きます！私は本当にこのGoogleマップのAPIを使用して新しいです。ありがとう！ –

完了しました.. –

Googleマップ検索ボックス外の地図は機能していません

答えて

関連する問題