谷歌地图脚本仅在我第一次打开页面时加载

Question

在tutorial 之后，我在我的 rails 4 项目中添加了一个谷歌地图组件。现在，当我在浏览器中打开我的页面（地图位于登录/索引页面上）时，地图会显示，但是当我使用导航四处移动时，地图不在那里。我是 Rails 新手，不知道如何修复它，也不知道它为什么会发生。控制台中没有错误。

这是我正在谈论的页面的html：

<script>
function initialize() {
var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(46.04236, 14.48786)
  };

  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>

<div class="col-xs-12 ">
    <div class="panel panel-default">
        <div class="panel-heading center">
            <h3 class="panel-title">Lokacija</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6 center">
                <br />
                <br />
                <br/ >
                <br />
                <p>Institut Jožef Stefan</p>
                <p>Knjižnica</p>
                <p>Jamova 39</p>
                <p>1000 Ljubljana</p>
                <br />
            </div>
            <div class="col-xs-6">
            <div id="googleMap"></div>
            </div>              
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title">Telefonske številke</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6">
                <p>informacije:</p>
                <p>izposoja:</p>
                <p>bibliografije:</p>
                <p>vodja knjižnice:</p>
                <p>fax:</p>                                             
            </div>
            <div class="col-xs-6 right">
                <p>+386 1 477-3304</p>
                <p>+386 1 477-3304</p>
                <p>+386 1 477-3247</p>
                <p>+386 1 477-3258</p>
                <p>+386 1 477-3152</p>
            </div>
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title">Delovni Čas</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6">
                <p>ponedeljek-četrtek:</p>
                <p>petek:</p>
            </div>
            <div class="col-xs-6 right">
                <p>8.00-19.00</p>
                <p>8.00-17.00</p>
            </div>
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title linktext"><%= link_to 'Cenik', zic_cenik_path %></h3>
        </div>

    </div>
</div>

所有与 gmaps 相关的内容都在这里。如果您需要更多信息，请告诉我，我将编辑主帖。我也有整个页面的gitHub repo。这里的相关视图是 zic/index 。

Answer 1

我遇到了同样的问题，用这条线解决了这个问题，并且不必禁用 turbolinks：

google.maps.event.addDomListener(document, 'page:change', initialize);

Answer 2

听起来问题在于您打开了 Turbolinks，当您离开然后返回时，页面实际上并没有收到加载消息。您可以关闭 Turbolinks，将 google maps 脚本标签添加到应用程序布局文件的标题中，或者尝试使用“page:changed”事件重新加载它。更多关于 Turbolinks 的信息可以在这里找到：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks