如果不刷新整个页面，则无法加载GMaps4Rails和Turbolinks

Question

我正在使用gmaps4rails在“客户端”显示页面上加载地图。我已经集成了turbolinks来让应用程序更快，但现在我遇到了一个问题，我必须用地图刷新页面才能显示地图。我得到的只是一个空白的地图框架。当我刷新页面时，地图正确显示。

我尝试添加gem 'jquery-turbolinks'，但问题仍然存在。

视图中：

<%= gmaps("map_options" => {:container_class => "map_container_renamed", "zoom" => 15, "auto_zoom" => false},"markers" => { "data" => @json }) %>

在application.js中

//= require jquery
//= require turbolinks
//= require jquery.turbolinks
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

map为空here的页面源代码的Gist。

Answer 1

修复的结果是，我需要一个完整的页面加载才能刷新脚本。

添加

'data-no-turbolink' => true

到地图页面的链接起作用了。

例如，如果我有一个客户端的索引页，并且我在显示页上有客户端所在位置的地图，则转到显示页的链接的格式如下：

<%= link_to 'View Client', client, class: "btn", 'data-no-turbolink' => true %>

这将导致html和javascript的完全刷新，而不仅仅是改变后的html。

Answer 2

技术背景

data-no-turbolink

请注意，仅将属性data-no-turbolink="true"添加到链接确实会抑制该链接的turbolink。点击这个链接确实会加载整个页面，而不是用turbolinks替换内容。

但是，有几种方法可以在不抑制turbolinks的情况下将turbolinks用于gmaps4rails。

Turbolinks回调

使用turbolink的关键是使用所提供的回调函数。在这种情况下，必须告诉gmaps4rails在turbolinks加载了新页面时执行地图加载。

通常，可以像Railscast #390中所示那样使用$(document).on('page:load', function ... )。

JavaScript的同源策略

google包含的google api script从gmap4rails静态服务器请求另一个脚本。但是，如果该api由turbolinks动态包含，则单一来源策略将阻止对google静态服务器的请求。

单一来源策略本身是一件很有用的事情。尽管有几种方法可以绕过它，但这似乎不是一件很自然的事情。相反，这样做的“正确方法”是“证明”网页确实想要执行远程脚本( google api)，并且远程脚本不是由恶意脚本请求的。这是通过在html树中直接包含请求google api的script标记来实现的。

当使用turbolinks时，只有在第一次请求时才能将google api脚本标签直接包括在html树中，因为所有随后的更改都是通过turbolink动态地注入到树中的。这意味着，在使用turbolink时，即使在不显示地图的页面上，也必须包含google api。

解决方案1(推荐)：将fork用于gmaps4rails

我做了一个拉request，希望能为gmaps4rails添加Turbolinks支持。

演示

如果你愿意，先看一下这个演示，它展示了gmaps4rails和turbolinks的用法：

• http://gmaps-turbolinks-demo.herokuapp.com/
• https://github.com/fiedl/gmaps4rails-turbolinks-demo

如何在你的项目中使用它

您可以尝试一下，并通过将fork添加到Gemfile来检查它是否适用于您的项目：

# Gemfile
# ...
gem 'turbolinks'
gem 'gmaps4rails', '~> 2.0.1', git: 'https://github.com/fiedl/Google-Maps-for-Rails.git'
# ...

此外，您需要修改您的布局文件，以便在html头中包含api：

<!-- app/views/layouts/application.html.erb -->
<html>
  <head>
    ...
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= gmaps4rails_api_script_tags  #   <-- THIS IS NEW ----------------- %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    ...
    <%= yield %>
    <%= yield :scripts %>
  </body>
</html>

如果出于某种原因，你不想使用这个分支，我看到了两种将gmaps4rails与turbolinks一起使用的替代方案：

解决方案2:手动完成

基本上做与fork相同的事情(解决方案1)，可以手动将api脚本添加到布局文件的头部。然后，当通过turbolinks加载页面时，可以使用javascript配置和激活地图。

在gmaps4rails wiki：https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Using-with-UJS中，这通常是针对UJS的使用进行演示的。

解决方案3:手动包含api statics

如果您不想全局添加api脚本，有一种方法可以绕过单源策略并动态加载api。

我为那个准备了一个要点：https://gist.github.com/fiedl/6573175

您必须添加一个javascript文件，该文件执行两项操作：

1. 加载google maps api本身。
2. 加载由api加载的静态文件。

您可以通过在浏览器中打开api script并从底部的getScript调用复制url来找到静态文件的url。

但：这样做会将静态api请求修复到您的区域设置，如果您的应用程序在国际上使用，这可能不是一件好事。

Answer 3

在重新访问已经由turbolinks管理的页面时，我在填充地图画布时遇到了困难，特别是在使用后退按钮时。我通过为turbolinks事件page:load添加一个侦听器来映射初始化，修复了这个问题。

map.js.coffee

google.maps.event.addDomListener(window, 'load', @_setup)
google.maps.event.addDomListener(window, 'page:load', @_setup)

application.js.coffee

//= require jquery
//= require jquery.turbolinks