Карта Google не отображается во всплывающем окне из-за стиля div - PullRequest
Новая
       7

Карта Google не отображается во всплывающем окне из-за стиля div

0 голосов
/ 10 октября 2018

У меня есть следующая функция для отображения местоположения в Google Map на основе координат.Следующая функция вызывается при нажатии кнопки: 

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 - это функция, найденная в StackOverflow для отображения карты: 

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 с правильным местоположением во всплывающем окне, но она не видна из-за стиля элемента div googleMap, позиция установлена ​​в абсолютное значение. Как вы можетесм. в openMapDialog, я пытался установить его в начальный, но я не могу. Я знаю, что позиция в начальном будет работать, так как я попробовал это сначала в Chrome DevTools.

Любая идея о том, как установить правильныйстиль для googleMap div?

Спасибо

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Судя по всему, у вашего divMAp нет размеров, я думаю, просто установив ширину и высоту на divMAp до 100%, добьемся цели.

добавьте следующие две строки в divMAp.id = "googleMap"; 

divMAp.id = "googleMap";
divMAp.style.width = '100%';
divMAp.style.height = '100%';
0 голосов
/ 10 октября 2018

Попробуйте установить высоту в div googleMap равным 100% или жестко запрограммированному количеству пикселей.У меня была эта проблема раньше, потому что у div не было высоты, поэтому она выглядит невидимой.

...