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>