导轨4带有涡轮和窗户负载

I'm using Rails 4.

我正在使用Rails 4。

I'm trying to use this script to show google maps. I got a page with different places and each place got an address. It shows in google maps.
So i'm using pagination and on each page I got 4 places. 4 scripts of gmap.
But this scripts initializes only on page reload (ctrl+R or F5), that's because of turbolinks.

我正在尝试使用此脚本来显示谷歌地图。我有一个不同地方的页面,每个地方都有一个地址。它显示在谷歌地图中。所以我使用分页,在每个页面上我有4个位置。 gmap的4个脚本。但是这个脚本仅在页面重新加载(ctrl + R或F5)时初始化,这是因为turbolinks。

How can i make it work the easiest way?

我怎样才能让它以最简单的方式工作?

<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(<%= place.latitude %>, <%= place.longitude %>); 
    var mapOptions = {
      zoom: 16,
      center: myLatlng
    };
    var map = new google.maps.Map(
      document.getElementById("map-canvas-<%= place.id %>"),
      mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: '<%= place.title %>'
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

that's the script. And div with each map looks like this:

这是剧本。每个地图的div看起来像这样:

<div id="map-canvas-<%= place.id %>"></div>

1 个解决方案

#1

You need to initialize scripts via turbolinks. Check this ASCIIcast about turbolinks.

您需要通过turbolinks初始化脚本。检查这个关于turbolinks的ASCIIcast。

In general, you need to change...

一般来说,你需要改变......

jQuery(function() {
  # your script
});

...to...

var ready;
ready = function() {
  # your script
};

$(document).ready(ready);
$(document).on('page:load', ready);

All turbo links events you can find here.

所有涡轮连接活动都可以在这里找到。

Update for Turbolinks 5

page:load has changed to turbolinks:load, so instead you want to write:

page:load已更改为turbolinks:load,因此您要编写:

var ready;
ready = function() {
  # your script
};

$(document).on('turbolinks:load', ready);

You no longer need to specify $(document).ready(); as turbolinks:load does that. For more info, check out the README.

您不再需要指定$(document).ready();作为turbolinks:负载就是这样。有关更多信息,请查看自述文件。