谷歌地图在 jquery 模态对话框中不可见

Question

我不想在 jquery ui 模式对话框中显示谷歌地图。我打开对话框，但地图不可见。然而它存在在那里只是不可见。

这是页面来源：

<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">
    <div id="map" style="width: 300px; height: 300px;"></div>
</div>

似乎 z-index 不知何故是错误的，但我试图在地图 div 上更改它，但这无济于事。 当我打开模态对话框时，这是其中应该显示地图的代码。

<script>
    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
                });
        };
    })();
</script>
<div id="map" style="width: 300px; height: 300px;"></div>

这就是我呈现模态对话框的方式：

$(".openDialog").live("click", function (e) {
        e.preventDefault();
        $("<div></div>")
                    .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"})

Answer 1

试试这个

HTML：

<div id="mymodal">
    <div id="map" style="width: 300px; height: 300px;"></div>
</div>

JS：

$(function(){
    var map;
    var elevator;
    var latlng=new google.maps.LatLng('44.339565', '-114.960937');
    var styleArray = [
        {featureType: "all", stylers: [{ visibility: "off" }]},
        {featureType: "road", stylers: [{ visibility: "on" }]},
        {featureType: "administrative", stylers: [{ visibility: "on" }]}
    ];
    var myOptions = {
        styles: styleArray,
        zoom: 6,
        center: latlng,
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map($('#map')[0], myOptions);

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://google-maps-icons.googlecode.com/files/walking-tour.png',
        draggable: true
    });

    $('#mymodal').dialog({width:335, height:355});
});​

An Working Example.