如何在 Google 地图信息窗口中添加地点自动完成框？答案

【问题标题】：How to add Places Autocomplete box inside a Google Maps InfoWindow?如何在 Google 地图信息窗口中添加地点自动完成框？
【发布时间】：2017-12-11 21:10:06
【问题描述】：

我正在使用 Google Maps Javascript API v3，并尝试在用户单击标记时出现的 InfoWindow 中插入 Places Autcomplete 框。

我知道如何创建一个自动完成对象，我知道如何创建一个只接受文本输入的信息窗口，但我不知道如何将我的自动完成对象放入我的信息窗口中。

除其他外，这是我尝试过的，但在这种情况下，我希望自动完成框的位置只是说“从以下位置获取路线： [object Object]"。这是在 InfoWindow 内。

Address 是我的标记的地址，它工作正常。

这是我的代码 sn-p：

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

感谢您的帮助！

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 autocomplete

【解决方案1】：

这可以通过在信息窗口中放置一个地方搜索框来完成。请在此处查看地点搜索框文档：

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 的信息窗口示例 here，以便在信息窗口中有一个搜索框来自动完成地址。请在此处查看我的 JSFiddle：

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

请注意，为了安全起见，我已经编辑了我的 API 密钥。请输入您自己的信息以使用此示例。

我希望这会有所帮助！

【讨论】：