gmap在jquery对话框中一次加载后显示四分之一答案

【问题标题】：gmap shows one fourth after one load in jquery dialog boxgmap在jquery对话框中一次加载后显示四分之一
【发布时间】：2012-07-25 13:59:23
【问题描述】：

我正在尝试根据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 会正确显示，但之后每次调用弹出窗口都会打开，但地图会出现四分之一且标记显示不正确。

已编辑

不幸的是，我没有得到一个单一的答案，或者我的问题可能对 SO 用户不清楚。

我制作了一个测试页面，您可以在其中检查确切的问题。

第一次点击它会显示完美的地图，但是当你关闭弹出窗口一次又一次点击gmap 然后弹出窗口打开但gmap 显示四分之一。

this is link of test page

【问题讨论】：

标签： jquery asp.net jquery-ui google-maps-api-3 jquery-ui-dialog

【解决方案1】：

最后通过在对话框打开方法中进行一些更改或调整解决了问题

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

style=display:none 在页面加载时不显示弹出窗口。

我使用此调用打开方法打开弹出窗口的第二个更改

$('#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>

【讨论】：