谷歌地图自动完成未在 Rails 应用程序中加载答案

【问题标题】：Google Maps Autocomplete not loading in Rails app谷歌地图自动完成未在 Rails 应用程序中加载
【发布时间】：2016-07-11 00:09:13
【问题描述】：

尝试让 Google 地图自动完成地址工作。这是我正在使用的代码的 sn-p：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=<%=ENV['GOOGLE_API_KEY'] %>&libraries=places"></script>

<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">

<script>
  function init() {
    var input = document.getElementById('locationTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

我已将它放在我的一个视图中，虽然一切似乎都可以正常加载（没有控制台错误），但当我输入地址时，下拉列表永远不会出现。

该下拉框位于 .pac-container div 中，它确实出现了，尽管 display:none; 当我在 Chrome 开发工具中覆盖它时，我只看到我的搜索框下方出现了谷歌徽标（好像列表为空） .

我将此代码复制到我的 rails 应用程序之外的空白 html 页面，它运行良好。

【问题讨论】：

检查这个：developers.google.com/maps/documentation/javascript/…
我最初使用的是他们的第一个示例 - 地址表单的自动完成。我使用他们的确切代码遇到了同样的问题。

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

【解决方案1】：

它对我来说很好用。

我对此进行了测试：

<style> #map {height: 90%} </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<div id="map"></div>
<script>
   function init() {
    var input = document.getElementById('locationTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 50.869754630095834, lng: 4.353812903165801},
      zoom: 12
    }); 
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

你有什么不同的地方吗？我有什么遗漏吗？

【讨论】：