GoogleマップがFancyBox内で正しく表示されないのですが、どうすれば修正できますか？

Question

FancyBox内にGoogleマップを表示する必要があります。このチュートリアルでは、 "fancybox.iframe" CSSクラスを使用して簡単にこれを行う方法を示していますが、マップ以外のものを表示するにはFancyBoxが必要です。下のフォーム。

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

CSS

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

と最終的にいくつかのCoffeeScript

HTML：：

$ -> 
    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 

の結果

はこれまでのところ、ここでは（非常に簡単な）私のコードですそれはほとんど私が何をwレンダリングが台無しにされていることを除き、アリ、

私は内部のマップをドラッグした場合、結果は...このようなものである：そう

、結論では、I」確かに重要な財産や構成が欠けていますよね？この問題を解決するのを手伝ってもらえますか？事前に

無限のおかげで、

注意。私はここで似たような質問を読み、試しましたが、私はまだ失敗しています。だから私はここで私の問題を最も単純なバージョンに減らしました。

Answer 1

Googleマップは、最終的にどのくらいの大きさになるかわからないときにこれを実行します。たとえば、マップを開く前にライトボックスに割り当てた場合など、マップのサイズはわかりません。

コンストラクタでマップを追加するのではなく、ボックスを開いたときに起動するコールバックに追加してみてください。

によって提供さ

コード例あなたは、地図のコンテナのサイズを変更するマップのAPIを取得するためにMapにresizeイベントをtriggerでき http://goo.gl/t7SOm

Answer 2

「muは短すぎます」。