jquery - ファンシーボックスにGoogleマップを動的に表示する

Question

リピーターとdiv地図を表示するASP.NET Webサイトがあります。その中で、緯度と経度をデータ ソースから動的に指定します。をマップで埋めることはできdivますが、ファンシー ボックスを呼び出すと、最初はマップが表示されません。リンクを 2 回目にクリックすると、以前の地図の位置が表示されます。それの何が問題なのですか？

 <asp:Repeater ID="rptBranchList" runat="server">
        <ItemTemplate>
            <div class="branch" onclick="ShowBranchInfo('<%#Eval("Value") %>');">
                <img id='img<%#Eval("Value") %>' src="images/down.png" alt=""         style="float: left;
                    width: 20px;" />
                <span id='<%#Eval("Value") %>'>
                    <%#Eval("Name") %></span>
            </div>
            <div id='div<%#Eval("Value") %>' class="branchInfo" style="display: none;">
                <div style="float: left; width: 400px;">
                    <span><b>Şube Kodu</b>
                        <asp:Label ID="lblRegion" runat="server" Text='<%#Eval("Value") %>'></asp:Label>
                    </span>
                    <br />
                    <span><b>Adres</b>
                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
                    </span>
                    <br />
                    <span><b>Telefon</b>
                        <asp:Label ID="Label2" runat="server" Text='<%#Eval("Phone") %>'></asp:Label>
                    </span>
                    <br />
                    <span><b>Faks</b>
                        <asp:Label ID="Label3" runat="server" Text='<%#Eval("Fax") %>'></asp:Label>
                    </span>
                    <asp:HiddenField ID="hdnValue" runat="server" Value='<%#Eval("Value") %>' />
                </div>
                <div style="float: left; width: 120px; padding-left: 30px;">
                    <a href="#map_canvas" class="mapInfo_click" data-coor='<%#String.Format("{0},{1}",Eval("Latitude"),Eval("Longitude"))%>'
                        addres='<%#Eval("Address") %>' branchname='<%#Eval("Name") %>'>
                        <img src="images/pin.png" alt="harita da göster" />
                    </a>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>

          <div id="map_canvas" style="width: 600px; display: block; height: 300px; z-index: 1200;"> &#160;</div>

$(".mapInfo_click").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 100,
'speedOut': 100,
'overlayShow': false
}).click(function () {
var _lat = $(this).attr('data-coor').split(',')[0];
var _lon = $(this).attr('data-coor').split(',')[1];
init(_lat, _lon, 15, $(this).attr('branchname'), $(this).attr('addres'));
var mess = "Lattitute: " + _lat + " Longtitute:" + _lon;
//konum();
//$("#map_canvas").animate({ "height": "toggle" }, { duration: 1000 });
});

---

コードがわかりにくかったので画像貼っておきます