带有 Google Maps Javascript API 的 Rails 应用程序仅适用于多个页面重新加载答案

【问题标题】：Rails app with Google Maps Javascript API only works on multiple page reloads带有 Google Maps Javascript API 的 Rails 应用程序仅适用于多个页面重新加载
【发布时间】：2018-10-16 01:49:23
【问题描述】：

我正在尝试将 Google Maps Javascript API 添加到 Rails 5.2 网络应用程序。我有一个启用了 Google Maps Javascript API 的 Google Developer 帐户和 API 密钥。 Google 文档中的示例代码位于https://developers.google.com/maps/documentation/javascript/tutorial。我用我的 API_KEY 把它放在一个普通的 html 文件中，它工作正常。但我无法让它在 Rails 中正常工作。三个重要的代码部分是：

1) 在我的 html 页面上添加一个 id=map 的 div。这是显示地图的地方。

# app/views/pages/map_page.html.erb
<div id="map"></div>

2) 使用我的 API 密钥调用 Google API，然后回调函数 initMap。我把它放在 application.html.erb 文件的头部。

# app/views/layouts/application.html.erb
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

3) 使用地图的硬编码坐标定义 initMap 函数。我把它放在它自己的js文件中。

# app/assets/javascripts/map.js
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

此设置仅在我刷新页面一次或多次时才有效。我确信这是与 turbolinks 相关的，但如果我尝试为 turbolinks 包装函数，它会变得更糟。然后我得到一个错误，无论我刷新页面多少次，initMap 都不是一个函数。

document.addEventListener("turbolinks:load", function() {
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
});

根据另一个 SO 回答，我将 application.html.erb 中的 Google API 调用更改为以下添加 data-turbolinks-eval="false。不走运。

<script async 
src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap"
defer data-turbolinks-eval="false"></script>

如何在不刷新页面的情况下使其正常工作？

【问题讨论】：

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

【解决方案1】：

我找到了解决方案，我会在这里发布，以防有人遇到同样的问题。

原来有两个问题。一个是使用谷歌示例中的 CSS，内联是：

<div id="map" style="height: 100%;"></div>

这在单个 html 文档中运行良好，但在我的 Rails 应用程序中不起作用（不知道为什么，但显然这是一个已知问题）。我必须添加一个明确的高度。第二个问题是我在问题中提到的问题。在第一页加载时加载地图，而无需刷新页面。为此，您需要将 Google API 调用和对 initMap 函数的回调放在页面底部，而不是在 application.html.erb 头部部分。

# app/views/pages/map_page.html.erb
<div id="map" style="height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>

您可以将 initMap 函数放在它自己的 js 文件中，甚至可以将它放在同一个 map_page 文件中，位于 google api 调用上方的脚本标签内。不要用 turbolinks:load 包裹它。

【讨论】：