导轨4带有涡轮和窗户负载 [英] rails 4 with turbolinks and window load

问题描述

我正在使用Rails 4.

I'm using Rails 4.

我正在尝试使用此脚本来显示谷歌地图。我有一个不同地方的页面，每个地方都有一个地址。它显示在谷歌地图。

所以我使用分页，在每个页面上我有4个位置。 gmap的4个脚本。

但这个脚本只在页面重新加载（ctrl + R或F5）上初始化，这是因为turbolinks。

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.

如何让它以最简单的方式运作？

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>

这是脚本。每个地图的div看起来像这样：

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

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

推荐答案

您需要通过turbolinks初始化脚本。查看有关turbolinks的此ASCIIcast 。

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

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

In general, you need to change...

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

... to ...

...to...

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

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

您可以找到的所有turbo链接事件这里。

All turbo links events you can find here.

页面：加载已更改为 turbolinks：加载，因此您要编写：

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

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

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

您不再需要指定 $（document）.ready（）; as turbolinks：load 这样做。有关详细信息，请查看自述文件。

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

这篇关于导轨4带有涡轮和窗户负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！