javascript - Google map 在 FancyBox 中无法正确渲染，我该如何纠正？

Question

我目前需要在 FancyBox 内显示 Google map 。本教程展示了如何使用“fancybox.iframe”CSS 类以直接的方式执行此操作，但我需要 FancyBox 来显示的不仅仅是 map ，即。下面的表格。

到目前为止，这是我的代码(非常简单):

HTML

<div id="fancybox-container"></div>

CSS

#fancybox-container {
  display: none;
  width: 450px;
  height: 500px;
  border: 1px solid red;
  padding: 3px;
  overflow: hidden;
}

最后是一些 CoffeeScript:

$ ->
  new FancyMap()

class FancyMap
  constructor: ->
    @openMap() #once fancybox is open proceed to render the map inside of it
    options =
      center: new google.maps.LatLng(6.191556, -75.579716)
      zoom: 14
      mapTypeId: google.maps.MapTypeId.ROADMAP
    @map = new google.maps.Map $('#fancybox-container')[0], options

  openMap: ->
    $('a[href=#fancybox-container]').fancybox
      maxWidth: 500
      maxHeight: 550
      fitToView: false
      autoSize: true
      closeClick: false
      openEffect: 'none'
      closeEffect: 'none'

window.FancyMap = FancyMap

结果几乎就是我想要的，只是渲染困惑了，

如果我将 map 拖到里面，结果是..像这样:

所以，总而言之，我肯定缺少一个重要的属性或配置，对吗？你能帮我解决这个问题吗？

提前无限感谢，

注意。我在这里阅读并尝试了类似的问题，但仍然不成功。因此，我将这里的问题简化为最简单的版本。

Answer 1

Google map 在不知道其最终大小时会执行此操作，例如，如果您在打开灯箱之前将其分配给灯箱，则 map 将不知道它需要多大的大小。

不要在构造函数中添加 map ，而是尝试将其添加到回调中，该回调将在盒子打开时触发。

“mu太短”提供的代码示例 http://goo.gl/t7SOm