Google Maps API 替换内容仍为灰色答案

【问题标题】：GoogleMaps API replace content remains grayGoogle Maps API 替换内容仍为灰色
【发布时间】：2016-01-14 13:47:16
【问题描述】：

我使用Bootstrap 创建了一个网站。左侧有一个导航面板。

现在单击导航按钮会执行 $('#center_div').load(...) 操作以加载其他主要内容。

我的第一个内容以同样的方式加载，它包含一个正确显示的谷歌地图对象。

<div>

    <script>

        (function() {

                var mapCanvas = document.getElementById('map_container');
                console.log(mapCanvas);

                var mapOptions = {
                    center: new google.maps.LatLng(50.10957, 8.679543),
                    zoom: 8,
                    scrollwheel: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                new google.maps.Map(mapCanvas, mapOptions);

        });

    </script>

<div id="map_container" style="height: 550px"/>

</div>

现在加载另一个内容（正在工作）并切换回第一个内容 -> map_container 显示一个灰色矩形。

还要查看网络流量... 第一次装载零件第二次什么都没发生

有什么想法吗？

编辑 1

好的，我试着解释一下。

我的网站分为工具栏、导航和内容部分。

内容部分被这个javascript函数替换...

Test.loadContent = function (url, success, target, update) {

    console.log('loading ' + url);

    var content = target ? $(target) : $(Test.page);

    var data = {
        updateId: update ? update : content.attr('id')
    };

    content.hide().empty().load(url, data, function (responseText, statusText, xhr) {

        if (xhr.status == 403 || xhr.status == 401) {
            Test.loadContent("/login/auth");
        } else if (xhr.status !== 200) {
            content.html(responseText);
        }

        content.fadeIn(250, function () {

            if (success) {
                success(responseText);
            }

        });

    });

};

Test.map.initMap = function (target) {

    console.log('building Map');

    var mapOptions = {
        center: new google.maps.LatLng(50.10957, 8.679543),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    Test.map.instance = new google.maps.Map(document.getElementById(target), mapOptions);

};

现在我正在加载使用此功能截断的页面。剪下来的样子是这样的

<div>

    <script>

        $(function () {

            var target = $('#map_content');
            target.height(500);

            Test.map.initMap('map_content');

        });

    </script>

    <div id="map_content"></div>

</div>

所以 onReady 函数会触发地图的实际构建。

第一次一切顺利。但是在加载其他内容并返回到包含地图的页面后，地图仍然是灰色的。

第一次加载：

第二次加载：

google maps API 包含在我的标题部分中，在内容刷新期间不会更改。

编辑 2

我刚刚注意到调整浏览器窗口的大小会再次显示地图。

但正在执行

google.maps.event.trigger(Test.map.instance, "resize");

没有帮助解决问题

【问题讨论】：

我的猜测是它与ajax 调用有关-脚本在ajax 请求之后没有运行但是如果没有看到完整的代码或（甚至更好）a，很难回答这个问题sn-p 或小提琴。

标签： javascript ajax google-maps google-maps-api-3

【解决方案1】：

所以我终于找到了解决方案:)

我不得不打电话

google.maps.event.trigger(Test.map.instance, "resize");

但是在创建地图后直接调用它不起作用（可能是早期）使用 setTimeout(..., 1000) 有效但不确定。

一个干净的解决方案是在“空闲”事件发生时触发该事件。

google.maps.event.addListener(Test.map.instance, 'idle', function () {
    console.log('idle occured!');
    google.maps.event.trigger(Test.map.instance, "resize");
});

【讨论】：