在 Google Maps API Rails APP 之后加载 Javascript答案

【问题标题】：Loading Javascript After Google Maps API Rails APP在 Google Maps API Rails APP 之后加载 Javascript
【发布时间】：2017-07-09 16:02:42
【问题描述】：

昨天在另一个问题中，在另一个用户的帮助下，我可以设法使用 Geocoder 和 Gmaps4rails gem。它工作得很好，但是在我在页面上添加脚本后，其他 Javascript 不再工作了。
因此，如果我刷新页面工作正常，Fotorama 和 Gmaps 工作正常，但是，当我被应用程序 Fotoroma 上的另一个链接重定向时，Fotoroma 没有加载，实际上只有 Gmaps 工作。在整个应用程序中发生这种情况后，其他 JS 停止工作。

GMap 所在的视图：

<script src="//maps.google.com/maps/api/js?key=XXXXXX"></script>
</script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

<div class="fotorama col-sm-6"
      data-width="700"
      data-ratio="3/2"
      data-nav="thumbs"
      data-thumbheight="48"
      data-allowfullscreen="true">
  <% @property.images.each do |imagem| %>
    <%= link_to imagem.url do %>
        <%= image_tag(imagem.url) %>
    <% end if @property.images? %>
  <% end %>
</div>
<h3>Description of the property:</h3>
<%= @property.description %>
<h3>Property in the map:</h3>
<div class="col-sm-10">
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>

在底部的 JS 脚本：

<script type="text/javascript">
    $(document).on('turbolinks:load', function(){
        $('.fotorama').fotorama({})
    })
 </script>
 <script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    });
</script>

应用JS：

//= require bootstrap    
//= require underscore
//= require gmaps/google
//= require turbolinks
//= require fotorama
//= require_tree .

应用布局

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

我已经尝试将包含标签更改为：

 <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>

不要解决问题。如果我从视图中删除 JS 导入脚本，则映射不起作用，但 JS 问题停止。
我尝试在输入 gmaps 时这样做：

<script src="//maps.google.com/maps/api/js?key=XXXXXX" data-turbolinks-eval=false></script>

不起作用。

当问题发生时，控制台会显示：

有人遇到过这个问题或知道如何解决吗？

【问题讨论】：

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

【解决方案1】：

我可以设法解决这个问题。我不认为这是解决方案，但如果有人有同样的问题，也许可以提供帮助。

首先需要更正脚本源的链接。改变

<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

为：

<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

我在这里通过 stevenm 的评论找到了这个：

https://github.com/apneadiving/Google-Maps-for-Rails/issues/166

并且还将脚本的位置更改为头部

app/views/layout/application.html.erb

应该是这样的：

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<script></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
<script type='text/javascript' src="//maps.google.com/maps/api/js?key=AIzaSyB52XBCs9iJ2UTTHkWCePRkEci7Hlrn1-k"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
<script type='text/javascript' src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js'></script>
<%= csrf_meta_tags %>

在这之后，至少对我来说，工作正常。

【讨论】：