谷歌地图自动完成设置后不工作答案

【问题标题】：Google Maps AutoComplete Not working after setting up谷歌地图自动完成设置后不工作
【发布时间】：2017-02-28 05:34:53
【问题描述】：

我已经查看了关于 google 地图自动完成主题的大多数问题，并且还查看了文档。出于某种原因，尽管 JS 和 HTML 都设置好了，但客户端似乎什么也没发生。我还查看了开发人员控制台是否有错误，但没有。

这是我包含的脚本标签：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY_HERE&libraries=places"></script>

html

 <div class="form-group row">
      <label for="example-text-input" class="col-sm-2 col-form-label">City</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" type="text" id="city" placeholder="San Francisco, Oakland, etc..">
      </div>
 </div>
<script>
function initialize() {
    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

我不知道从这里做什么。如果我可以提供更多信息，请告诉我。提前致谢！

【问题讨论】：

您是否在 developer 工具控制台中遇到任何错误？（在编辑问题以包含该信息之前询问）
@JaromandaX 没有明显的错误。
您的代码可以正常工作（只要googleapis 的脚本标记高于您发布的代码 - 并使用适当的 API KEY） - 正如您所见 here
呃，我不明白为什么它对我不起作用！
甚至不在小提琴中？

标签： javascript ruby-on-rails google-maps google-maps-api-3

【解决方案1】：

啊，我发现了错误。我在引导模式中有这个自动完成输入框，自动完成选项隐藏在模式后面，因为它有一个自然的 z 轴。为了解决这个问题，我添加了一些简单的 CSS：

.pac-container {
  z-index: 10000 !important;
}

【讨论】：