Google 由于 div 样式，地图在弹出窗口中不可见

Question

我有以下功能可以根据坐标显示 Google 地图中的位置。单击按钮会调用以下函数：

function onClickLocate(args) {
    var gridInstance = $(args.target.closest(".e-grid")).ejGrid("instance");
    //get index of the row getIndexByRow() 
    var inx = gridInstance.getIndexByRow(args.target.closest("tr"));
    //CurrentViewData using Index 
    var data = gridInstance.getCurrentViewData()[inx]; 
    openMapDialog(data.Latitude, data.Longitude);
}

openMapDialog 打开一个 syncfusion 弹出窗口

function openMapDialog(lat, lng) {
    $("body").append("<div id='branchMap'></div>");
    var divMAp = document.createElement('div');
    divMAp.id = "googleMap";
    $("#branchMap").append(divMAp);
    $('#googleMap').css("position", "initial");
    $("[data-upgraded]").removeAttr("data-upgraded");
    $("#branchMap").ejDialog({
        width: 800,
        height: 500,
        minWidth: 310,
        minHeight: 215,
        enableModal: true,
        showOnInit: true,
        title: "Warehouse Location",
        open: "createMap",
        cssClass: "custom-dialog",
        isResponsive: true,
        target: "body"
    });
};

createMap 是在 Whosebug 上找到的用于显示地图的函数：

function createMap(args) {
    document.getElementById('googleMap').style.display = "block";
    var lat =$("#branchMap").data("lat");
    var lng =$("#branchMap").data("lng");
    var map;
    var marker;
    var myLatlng = new google.maps.LatLng(lat, lng);
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    var mapOptions = {
        zoom: 18,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        draggable: false
    });

    geocoder.geocode({
        'latLng': myLatlng
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                $('#address').val(results[0].formatted_address);
                $('#latitude').val(marker.getPosition().lat());
                $('#longitude').val(marker.getPosition().lng());
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            }
        }
    });


    google.maps.event.addListener(marker, 'dragend', function () {

        geocoder.geocode({
            'latLng': marker.getPosition()
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('#address').val(results[0].formatted_address);
                    $('#latitude').val(marker.getPosition().lat());
                    $('#longitude').val(marker.getPosition().lng());
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                }
            }
        });
    });
}

问题是地图在 chtml 中呈现，弹出窗口中的位置正确，但由于 googleMap div 的样式，它不可见，位置设置为绝对正如您在 openMapDialog 中看到的那样，我试图将其设置为 initial 但我不能。我知道初始位置会起作用，因为我首先在 Chrome DevTools 中尝试了它。

知道如何为 googleMap 设置正确的样式 div 吗？

谢谢

Answer 1

尝试将 googleMap div 上的高度设置为 100% 或硬编码的像素数量。我之前遇到过这个问题，那是因为 div 没有高度所以它看起来不可见。

Answer 2

从外观上看，您的 divMAp 没有尺寸，我想只需将 divMAp 的宽度和高度设置为 100% 即可。

在divMAp.id = "googleMap"下添加如下两行;

divMAp.id = "googleMap";
divMAp.style.width = '100%';
divMAp.style.height = '100%';

Google 由于 div 样式，地图在弹出窗口中不可见

Google map not visible in pop up due to a div styling

javascript

css

jquery

google-maps

syncfusion