谷歌地图在灯箱弹出时无法正确加载答案

【问题标题】：Google Map doesn't loads properly in ligh box pop up谷歌地图在灯箱弹出时无法正确加载
【发布时间】：2015-12-08 14:31:04
【问题描述】：

我有两个文本框，我们可以在其中输入位置和按钮单击地图中显示的两点之间的路线。问题出在页面上，它显示正确，但是当我使用 lightbox 弹出窗口时，地图只显示灰色，如下图所示。对于弹出框，我使用了 asp.net 控件 modalpopupextender。

JS 代码。

<script type="text/javascript">
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });

        function GetRoute() {
            debugger;
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            };
            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('dvPanel'));

            //*********DIRECTIONS AND ROUTE**********************//
            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var distance2 = response.rows[0].elements[0].distance.text; /*used for ID firstNumber*/
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = document.getElementById("dvDistance");
                    var firstNumber = document.getElementById("firstNumber");
                    var dvDuration = document.getElementById("dvDuration");
                    var dvDurationC = document.getElementById("dvDurationC")
                    dvDistance.innerHTML = "";
                    dvDistance.value = parseFloat(distance);
                    firstNumber.innerHTML = distance2 /*used for ID firstNumber*/
                    dvDuration.innerHTML = duration;
                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
    </script>

【问题讨论】：

标签： javascript asp.net google-maps google-maps-api-3

【解决方案1】：

尝试进行以下两项更改：

移除显示属性并设置可见性：#map 上隐藏。
将#map 移动到它所在的空间不会被注意到的地方。之前可能是一个不错的选择。

请参阅此tutorial。

【讨论】：