在 Google 地图 API Rails APP 之后加载 Javascript

Loading Javascript After Google Maps API Rails APP

昨天在另一个问题中,在另一个用户的帮助下,我可以设法使用 Geocoder 和 Gmaps4rails gem。它工作得很好,但在我在页面上添加脚本后,其他 Javascript 不再工作。
因此,如果我刷新页面效果很好,Fotorama 和 Gmaps 可以正常工作,但是,当我被另一个 link 重定向到应用程序时,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>

不起作用。

当问题发生时,控制台显示:


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

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

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

<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

并且也把Scritps的位置改到

的头部
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 %>

在此之后,至少对我来说,效果很好。