google-maps - 具有列数 css 属性的 div 中的 Google 地图导致地图无法使用

Question

我将带有 javascript api v3 的 Google 地图嵌入到使用 column-count css 属性拆分为列的 div 中。地图在第一列中时有效，但如果它是另一列中的后面元素，则地图图块不会出现。

Codepen 与第一列中的工作图：http: //codepen.io/dan-sil/pen/grRKJz

  <div class="widgets-holder">
    <div id="map"></div>
      END MAP
    </div>
     <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      MAP:

    <div class="widget">
      WIDGET
    </div>
  </div>

Codepen 在第二列中带有损坏的地图：http: //codepen.io/dan-sil/pen/bpRKJQ

  <div class="widgets-holder">
     <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      WIDGET
    </div>
    <div class="widget">
      MAP:
    <div id="map"></div>
      END MAP
    </div>

    <div class="widget">
      WIDGET
    </div>
  </div>

任何帮助表示赞赏！

编辑：我只需要它在 Chrome 中工作，因为它被嵌入到 chromecast 应用程序中。如果我的所有项目都可以在没有 IE 支持的情况下运行... :)