Google-Maps-for-Rails 在未激活的 bootstrap 选项卡中

Question

在我的 Rails 4 应用程序中，我向主要 foo 对象添加了一个位置，并尝试添加 Google-Maps-for-Rails 以将其可视化。按照 gem 页面上的说明进行操作后，一切正常，现在仍然如此。

我还添加了 JS-tabs of bootstrap，它本身也很好用。

但是一旦我将 googlemaps 的嵌入代码放入初始页面上未激活的选项卡中，它就不会自行启动。按 F12（Firefox 开发人员控制台）后，它会被激活并按预期工作。

视图是这样的：

<ul class='nav nav-tabs' role='tablist'>
  <li role='presentation' class='active'><a href='#allgemein' aria-controls='allgemein' role='tab' data-toggle='tab'>Beschreibung</a></li>
  <li role='presentation'><a href='#location' aria-controls='location' role='tab' data-toggle='tab'>Lage</a></li>
</ul>

<div class='tab-content'>
  <div role='tabpanel' class='tab-pane fade in active' id='allgemein'>
    SOME INFOS
  </div>

  <div role='tabpanel' class='tab-pane fade' id='location'>
    LOCATION
    <div style='width: 800px;'>
      <div id="map" style='width: 800px; height: 400px;'></div>
    </div>

    <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();
        handler.getMap().setZoom(10);
      });
    </script>
  </div>
</div>

知道为什么会这样吗？

解决方案：

在preciz的帮助下找到了解决方案！

$('#tab_location').on('shown.bs.tab', function (e) {
  google.maps.event.trigger(map, 'resize');
});

Answer 1

有同样的问题，但无法查看我是如何解决的，因为我没有代码库。但解决方案是在显示之前触发地图的 rerender/redraw。

我想你可以在 SO 上找到解决方案。

在此处查看答案：How do I force redraw

Google-Maps-for-Rails 在未激活的 bootstrap 选项卡中

Google-Maps-for-Rails in an unactivated bootstrap tab

javascript

tabs

google-maps

twitter-bootstrap

ruby-on-rails-4