title: Google map is not visible in jquery modal dialog
body: <p>I wan't to display google map in jquery ui modal dialog. I open dialog but map is not visible. However it exists in there it just not visible.</p>
  
  <p>This is page source:</p>
  
  <pre><code>&lt;div class="dialog ui-dialog-content ui-widget-content" id="photoLocation" style="padding: 0px; background-color: rgb(255, 255, 255); overflow: hidden; width: auto; min-height: 0px; height: 390px; background-position: initial initial; background-repeat: initial initial; " scrolltop="0" scrollleft="0"&gt;
      &lt;div id="map" style="width: 300px; height: 300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seams that z-index is wrong somehow but I have tried to change it on map div but that doesn't help.
  When I open modal dialog this is code in there that should display map.</p>
  
  <pre><code>&lt;script&gt;
      var map;
      var styleArray = [
                        {
                            featureType: "all",
                            stylers: [
                            { visibility: "off" }
                          ]
                        },
                        {
                            featureType: "road",
                            stylers: [
                            { visibility: "on" }
                          ]
                        },
                        {
                            featureType: "administrative",
                            stylers: [
                            { visibility: "on" }
                          ]
                        }
                      ];
  
      (function () {
          window.onload = function() {
              var mapDiv = document.getElementById('map');
  
              var latlng = new google.maps.LatLng('44.339565', '-114.960937');
              var options = { styles: styleArray,
                  center: latlng,
                  zoom: 15,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  mapTypeControl: false
              };
              map = new google.maps.Map(mapDiv, options);
  
              var marker = new google.maps.Marker({
                      position: latlng,
                      icon: '../Content/Pointer.png',
                      map: map,
                      draggable: true
                  });
          };
      })();
  &lt;/script&gt;
  &lt;div id="map" style="width: 300px; height: 300px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/lNIoq.png" alt="enter image description here">
  This is how I present modal dialog:</p>
  
  <pre><code>$(".openDialog").live("click", function (e) {
          e.preventDefault();
          $("&lt;div&gt;&lt;/div&gt;")
                      .addClass("dialog")
                      .attr("id", $(this).attr("data-dialog-id"))
                      .appendTo("body")
                      .dialog({
                          title: $(this).attr("data-dialog-title"),
                          close: function () { $(this).remove() },
                          modal: true,
                          resizable: false,
                          show: 'fade',
                          width: 460,
                          height: 390,
                          create: function (event, ui) {
                              $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display", "none");
  
                              $(this).parents(".ui-dialog").css("padding", 0);
                              $(this).parents(".ui-dialog").css("border", 4);
                              $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);
  
                              $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("background", "#ffffff");
                              $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("overflow", "hidden");
  
                          }
  
                      })
                      .load(this.href);
      });
  
  
  @Html.ActionLink("Title", "Method", "Controller", new {imageId = @Model.ItemId}, new {data_dialog_id = "plid", @class = "openDialog button"})
  </code></pre>