如何在Google地圖InfoWindow中添加地點自動填充框？

我正在使用Google Maps Javascript API v3，並試圖在用戶單擊標記時出現的InfoWindow中插入Places Autcomplete框。如何在Google地圖InfoWindow中添加地點自動填充框？

我知道如何創建一個自動完成對象，並且我知道如何創建一個僅接受文本輸入的信息窗口，但我不知道如何將自動填充對象放入我的infowindow。

這是我嘗試過的，除此之外，但在這種情況下，我希望自動完成框的地方只是說「從以下位置獲取路線： [object Object]」。這是在InfoWindow中。

地址是我的標記，它工作正常的地址。

這裏是我的代碼片段：

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);

我還試圖通過設置信息窗口的內容後創建自動完成的對象，沒有運氣解決問題：

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')));

感謝您的幫助！

來源

2017-07-07 Mario_Bros

這可以通過在信息窗口中放置一個地方搜索框來完成。請參閱地方搜索框中的文件位置：

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

首先設置內容字符串：

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

然後點擊偵聽標誌這將打開信息窗口內：

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

我修改了Google的infowindow示例here，在infowindow中有一個搜索框，可以自動完成地址。請參閱我的jsfiddle這裏：

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

注意我有刪節我的安全API密鑰。請輸入您自己的使用此示例。

我希望這有助於！

來源

2017-07-11 21:34:32

如何在Google地圖InfoWindow中添加地點自動填充框？

回答

相關問題