谷歌地图在FancyBox内无法正确渲染，我该如何纠正？

Question

我目前需要在FancyBox中显示Google地图。本教程通过使用＆＃34; fancybox.iframe＆＃34;来展示如何以直接的方式执行此操作。 CSS类，但是我需要我的FancyBox才能显示不仅仅是地图，即。下面的表格。

到目前为止，这是我的代码（非常简单）：

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

结果，几乎是我想要的，除了渲染混乱，

如果我将地图拖到里面，结果就是......这样的东西：

所以，总之，我肯定错过了一个重要的属性或配置，对吧？你能帮我解决这个问题吗？

无限提前谢谢，

请注意。我在这里阅读并尝试了类似的问题，但我仍然没有成功。所以我把我的问题简化为最简单的版本。

Answer 1

谷歌地图在不知道它最终会有多大的情况下执行此操作，例如，如果您在打开它之前将其分配到灯箱，地图就不知道它需要的大小。

不是在构造函数中添加地图，而是尝试将其添加到回调中，该回调将在框打开时触发。

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

Answer 2

您还可以在trigger上Map resize个事件来获取Maps API以调整地图容器的大小。