google map render issue in ajax jquery ui modal dialog

Question

I have jquery ui modal dialog. jquery ui dialog content display using ajax call. my issue is when i open jquery dialog first time map load successfully. second time when i open dialog is not able to load map in dialog. i have try to inspect but div has content empty when open dialog second time.

I have try many stackoverflow answer but they are not working for me. because i have not just dialog issue. i think i may have issue with also content comes from ajax. you can see my google map api function to display map.

 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);
                        }
 }

my jquery ui dialog (map) content fetching from ajax call.

you can help to solve my issue.

please see my below div for googlemap display. it is in response of my ajax call

 <div id="googlemaps">

  </div>

above div contains my google map. first time open jquery ui dialog map load successfully but when open second time map div comes blank.

my ajax code with jquery ui dialog

 $("<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');
                                    }
                                })
                            }

Answer 1

I have found answer after getting working 2 days. it is required to first load ajax content into jquery ui dialog. please keep autoopen : false for dialog and open it after content loaded in to dialog.

then fire open method for ui dialog so dialog will able to load google map in ajax loaded content in jquery ui dialog.