gmap在“ jquery”對話框中顯示一次加載后的四分之一

Question

我正在嘗試根據repeater control data source中可用的經度和緯度顯示gmap。這是我的代碼

<script src="http://maps.google.com/maps/api/js?key=myapikey&sensor=false"
    type="text/javascript"></script>
<script type="text/javascript">
    $('document').ready(function () {
        $('.mapicon').click(function (e) {              
            init($(this).next('.hdnLatitude').val(), $(this).nextAll('.hdnLongitude').val(), $(this).nextAll('.hdnInfoWindow').val());
            $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 513 }, { height: 450 });
        });
    });
</script>

這是在其中加載gmap的init方法

<script type="text/javascript">

        function init(hdnLatitude, hdnLongitude, hdnInfoWindow) {
            //            alert(hdnLatitude);
            //            alert(hdnLongitude);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            var image = 'images/map-icon.gif';
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                map: map,
                icon: image
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(hdnInfoWindow);
                infoWindow.open(map, marker);
            });

        }
    </script>

這是HTML

<div id="popup_container" style="display: none;">
        <div id="map" style="width: 500px; height: 400px;">
        </div>
    </div>

問題是，當第一次單擊mapicon gmap會正確顯示，但是之后每次調用都會打開彈出窗口，但map會出現四分之一而標記未正確顯示。

已編輯

不幸的是，我沒有得到一個答案，或者我的問題對於SO用戶而言可能不清楚。

我做了一個測試頁，您可以在其中檢查確切的問題。

第一次單擊它顯示完美的地圖，但是當您關閉彈出窗口一次又一次單擊gmap彈出窗口將打開，但gmap顯示四分之一。

這是測試頁的鏈接

Answer 1

最后通過在對話框打開方法中進行一些更改或調整來解決問題

最初使用$("#popup_container").dialog({ autoOpen: false }); 代替

style=display:none不顯示頁面加載時的彈出窗口。

第二個更改是我使用此open方法調用來打開彈出窗口

$('#popup_container').dialog('open');

然后我調用init()方法

問題就解決了。

這是最終的document.ready方法

<script type="text/javascript">
        $('document').ready(function () {
            $("#popup_container").dialog({ autoOpen: false });
            $('#gmap').click(function () {
                $('#popup_container').dialog('open');
                $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 500 }, { height: 340 });
                init();
            });
        });
    </script>