JQ对话框中的jQuery-Googlemap显示地图的一部分

我使用jQuery对话框来显示google地图，但是当调用事件来加载对话框时，它有时会显示地图的一部分，有时会显示预期的完整地图

它将显示如下：-

代码如下：-

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(52.781059,-1.211027),
  disableDefaultUI: true,
  zoom:16,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("map-canvas")
  ,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

我到处寻找解决办法，但找不到任何有效的办法。我试过：-

initialize());
google.maps.event.trigger(map, 'resize');

并尝试将以下内容添加到对话框打开事件：-

resizeStop: function (event, ui) { google.maps.event.trigger(map, 'resize') },

但上述措施都不起作用

---

有什么建议吗？

正如我在评论中所建议的，最好在对话框中创建地图。关于画布的大小仍然需要改进（需要考虑到对话框的滚动条），但是您已经知道了

HTML:

---

您是否尝试过在对话框的打开事件中创建谷歌地图？

resizeStop: function (event, ui) { google.maps.event.trigger(map, 'resize') },

<div id="dialog">
    <div id="map-canvas"></div>
</div>

var map;

function initialize() 
{
    var mapOptions = 
    {
        center: new google.maps.LatLng(40.729884, -73.990988),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

$("#dialog").dialog(
{ 
    resizable: true, 
    draggable: true, 
    show: { effect: 'drop', direction: "left" }, 
    hide: 'slide', position: "right top", height: 300, width: 500, 
    resizeStop: function (event, ui) 
    { 
        $("#map-canvas").css({height:ui.size.height, width : ui.size.width});
        google.maps.event.trigger(map, 'resize') 
    },

    open: function (event, ui) 
    { 
        $("#map-canvas").css({height:300, width : 500});
        initialize(); 
    } 
});