未激活的引导选项卡中的 Google-Maps-for-Rails答案

【问题标题】：Google-Maps-for-Rails in an unactivated bootstrap tab未激活的引导选项卡中的 Google-Maps-for-Rails
【发布时间】：2016-04-05 11:55:21
【问题描述】：

在我的 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');
});

【问题讨论】：

标签： javascript twitter-bootstrap google-maps ruby-on-rails-4 tabs

【解决方案1】：

有同样的问题，但无法检查我是如何解决的，因为我没有！没有代码库。但解决方案是在显示地图之前触发地图的重新渲染/重绘。

我认为您可以在 SO 上找到解决方案。

在这里查看答案：How do I force redraw

【讨论】：