Google Map not rendering correctly inside FancyBox, How can I correct it?

I have a present need to display a Google Map, inside a FancyBox. The tutorial shows how to do this in a straight-forward manner by using a "fancybox.iframe" CSS class, But I'll need my FancyBox to display more than just the map, ie. a form below.

So far, here's my code(very simple):

HTML

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

CSS

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

and finally some 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

The result of that, is almost what I want except that the rendering is messed up,

If I Drag the map inside, the result is.. something like this:

so, in conclusion, I'm certainly missing an important property or configuration, right? Can you help me solve this issue?

Infinite Thanks in advance,

Note. I have read and tried the similar Questions here, but I'm still unsuccessful. So I reduced my issue here to its simplest version.

Google Maps does this when it doesn't know how big its eventually going to be, for example if you assign it to the light box before opening it the map wont know what size it needs to be.

Rather than adding the map in the constructor try adding it to the callback which will fire when the box has opened.

Code example provided by "mu is too short"