Google Maps InfoWindowの中にプレイスオートコンプリートボックスを追加するには？

Question

私はGoogle Maps Javascript API v3を使用しています。ユーザーがマーカーをクリックしたときに表示されるInfoWindowの中にPlaces Autcompleteボックスを挿入しようとしています。

私はオートコンプリートオブジェクトを作成する方法を知っていますが、テキスト入力だけをとる情報ウィンドウを作成する方法は分かっていますが、自分のインフォボックス内にオートコンプリートオブジェクトを配置する方法はわかりません。

これは私が試したことですが、この場合はオートコンプリートボックスに「Get directions from： [object Object]」と言うだけの場所が必要です。 InfoWindow内にあります。

アドレスは、正常に動作している私のマーカーのアドレスです。ここで

は私のコードスニペットです：あなたの助けのための

var infoWindowContent = [ 
    '<div id="directions-to-here"> Get directions from:', 
    '<input id="autocomplete" class="controls" type="text" 
    placeholder="Enter a starting location">', 
    '<p> to: </p>' + address 
].join('<br>'); 

var autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */ (
    document.getElementById('autocomplete'))); 

ありがとう：私も運で、情報ウィンドウの内容を設定した後、オートコンプリートのオブジェクトを作成することで問題を解決しようとした

var autocomplete = new google.maps.places.Autocomplete(); 
    var infoWindowContent = [ 
     '<div id="directions-to-here"> Get directions from:', 
     autocomplete, 
     '<p> to: </p>' + address 
    ].join('<br>'); 

    var infoWindowOptions = { 
     content: infoWindowContent, 
     position: position 
    } 
    var infoWindow = new google.maps.InfoWindow(toHereWindowOptions); 
    infoWindow.open(map); 

！

Answer 1

これは、インフォボックスに場所検索ボックスを置くことによって行うことができます。ここでの場所の検索ボックスのドキュメントを参照してください。

marker.addListener('click', function() { 
infowindow.open(map, marker); 
var input = document.getElementById('pac-input'); 
var searchBox = new google.maps.places.SearchBox(input); 
}); 

：情報ウィンドウを開き、マーカーのクリックリスナーの内側その後

var contentString = '<input id="pac-input" class="controls" type="text" placeholder="Search Box">'; 

：まず、コンテンツの文字列を設定し

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Googleのインフォ画面サンプルhereを修正して、インフォボックスに検索ボックスを表示して自動完成させますアドレス。ここに私のJSFiddleを参照してください。

https://jsfiddle.net/dpx9o1mo/1/

注私はセキュリティのための私のAPIキーを編集されています。このサンプルを使用するには、自分で入力してください。

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