ajax jquery ui模式对话框中的google地图渲染问题

我有jQueryUI模态对话框。使用ajax调用显示jqueryui对话框内容。我的问题是当我第一次成功地打开jquery对话框时。第二次打开对话框时，无法在对话框中加载贴图。我试图检查，但当第二次打开对话框时，div的内容为空

我试过很多答案，但它们对我不起作用。因为我不只是对话问题。我想我可能对来自ajax的内容也有疑问。你可以看到我的谷歌地图api函数来显示地图

 var map = '';
  function googleMap(selector, lat, lng) {
     alert(map);
       var myLatlng = new google.maps.LatLng(lat, lng);
        // var map;
        var mapOptions = {
          zoom: 4,
         center: new google.maps.LatLng(23.6459, 81.9217),
           mapTypeId: google.maps.MapTypeId.ROADMAP
             };
       if (!map) {
             map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
                      var marker = new google.maps.Marker({
                                        position: map.getCenter(),
                                        map: map
                                    });
        google.maps.event.addListener(map, "click", function () {
       document.getElementById("latitude").value = map.getCenter().lat();
        document.getElementById("longitude").value = map.getCenter().lng();
         marker.setPosition(map.getCenter());
});
} else {
              google.maps.event.trigger(map, "resize");
              map.setOptions(mapOptions);
                        }
 }

我的jqueryui对话框（map）内容从ajax调用获取

你可以帮我解决问题

请查看我下面的div，查看谷歌地图显示。这是对我的ajax调用的响应

 <div id="googlemaps">

  </div>

上面的div包含我的谷歌地图。第一次打开jquery ui对话框映射加载成功，但当打开第二次映射div为空时

我的带有jquery ui对话框的ajax代码

 $("<div>This is  content</div>")
                                        .dialog({
                                            "title": "",
                                            "width": "auto",
                                            "height": "auto",
                                            "modal": true,

                                            //                "buttons": {"OK": function() {
                                            //                $(this).dialog("close");
                                            //                },
                                            //                "Refresh": function() {
                                            //                getContent($(preview_btn).attr('data-id'));
                                            //                },
                                            //                }
                                        }).dialogExtend({
"load": function (evt, dlg) {
                                                getContent($(preview_btn).attr('data-id'), c_page);
                                                //$('.ui-dialog').css('top', '95px');
                                                //$("html, body").animate({
                                                // scrollTop:0
                                                //},"fast");

                                                $('span').removeClass('ui-button-icon-primary ui-icon');
                                                //$('span').remove();
                                                $('.ui-button').css('top', '5px');
                                                //$('.ui-dialog-titlebar-close').append('<span class="test">&nbsp;&nbsp;&nbsp;&nbsp;</span>');
                                                //$('.ui-dialog-titlebar-close').append('<span class="ui-button-text">Close</span>');
                                                $('.ui-dialog-titlebar-close').append('<div style="margin-top: -12px;">X</div>');
                                                $('.ui-dialog').css('top', scrollY + 'px');
                                                $('.ui-button-text').css({"margin-top": "1px", "height": "0px"});

                                            },
       });



    function getContent(id, c_page) {
                                // console.log(id);
                                $.ajax({
                                    type: 'post',
                                    url: 'xxx.php',
                                    //url: 'preview_template.php',
                                    data: {id: id, c_page: c_page},
                                    success: function (data) {
                                        $('body').find('.ui-dialog-content').html(data);
                                        var full_size = $(window).width();
                                        var ui_size = $('.ui-dialog').width();
                                        // console.log(full_size);
                                        // console.log(ui_size);
                                        var ui_left = (parseFloat(full_size) - parseFloat(ui_size)) / 2;
                                        $('.ui-dialog').css('left', ui_left + 'px');
                                    }
                                })
                            }

$（“这是内容”）
.对话({
“名称”：“名称”，
“宽度”：“自动”，
“高度”：“自动”，
“模态”：正确，
//“按钮”：{“确定”：函数（）{
//$（此）.dialog（“关闭”）；
//                },
//“刷新”：函数（）{
//getContent（$（preview_btn）.attr（'data-id'）；
//                },
//                }
}).dialogExtend({
“负载”：功能（evt、dlg）{
getContent（$（preview\u btn）.attr（'data-id'），c\u页面）；
//$（'.ui dialog'）.css（'top'，'95px'）；
//$（“html，body”）.animate({
//滚动顶部：0
//}“快”）；
$（'span'）.removeClass（'ui-button-icon-primary ui-icon'）；
//$（'span'）.remove（）；
$（'.ui button'）.css（'top'，'5px'）；
//$（'.ui对话框标题栏关闭'）。追加（''）；
//$（'.ui对话框标题栏关闭'）。追加（'close'）；
$（'.ui对话框标题栏关闭'）。追加（'X'）；
$（'.ui dialog'）.css（'top'，scrollY+'px'）；
$（'.ui按钮文本'）.css（{“页边顶部”：“1px”，“高度”：“0px”}）；
},
});
函数getContent（id，c_页）{
//console.log（id）；
$.ajax({
键入：“post”，
url:'xxx.php'，
//url:“preview_template.php”，
数据：{id:id，c_page:c_page}，
成功：功能（数据）{
$（'body'）.find（'.ui对话框内容'）.html（数据）；
var full_size=$（窗口）.width（）；
变量ui_size=$（'.ui对话框'）.width（）；
//控制台日志（全尺寸）；
//控制台日志（ui_大小）；
var ui_left=（parseFloat（完整大小）-parseFloat（ui_大小））/2；
$（'.ui dialog'）.css（'left'，ui_left+'px'）；
}
})
}

我在工作两天后找到了答案。首先需要将ajax内容加载到jQueryUI对话框中。请保留对话框的自动打开：false，并在内容加载到对话框后打开它

---

然后启动ui对话框的open方法，这样dialog就可以在jquery ui对话框中加载ajax加载内容中的google地图。

我在工作2天后找到了答案。首先需要将ajax内容加载到jQueryUI对话框中。请保留对话框的自动打开：false，并在内容加载到对话框后打开它

---

然后启动ui对话框的open方法，这样dialog将能够在jquery ui对话框中加载ajax加载内容中的google地图。

您能为您的问题编写FIDLE吗？我有很长的代码，所以无法在FIDLE上进行设置。你可以建议我你的答案，这样我就可以在我的机器上试试。结帐链接。您使用的是这种类型的对话框吗？@HareshKumar是的，我使用的对话框与您给定的链接相同。但是我的对话内容（map）是使用ajax获取的。您能在问题中添加ajax输出吗？您能为您的问题编写FIDLE吗？我有很长的代码，所以无法在FIDLE上进行设置。你可以建议我你的答案，这样我就可以在我的机器上试试。结帐链接。您使用的是这种类型的对话框吗？@HareshKumar是的，我使用的对话框与您给定的链接相同。但是我的对话内容（map）是使用ajax获取的。您能在问题中添加ajax输出吗？