谷歌地图Api：地图变灰第一次加载和灰色区域无法加载

Question

谷歌地图有一个非常奇怪的问题。控制台上没有错误，但每次加载地图时，它都只显示灰色框，并显示所有工具。

显示了右下角的工具，但没有图标（图标没有显示，只有白色框）。

如果我将地图向左移动，则所有左侧区域都会很好地加载，但如果我将其向右移动，则向右移动到初始位置，因此，灰色区域仍然是灰色的，地图不会渲染初始位置区域和右侧。

如果缩小地图，我可以看到有一条从北极到南极的直线边界，它们分割得很好（从我的初始位置左侧）和右侧（我的初始位置和到它的权利）。

这是一个错误吗？如何解决这个问题？

我试图将“调整大小”事件调用到地图中，但问题仍然存在。

以下是代码：

剃刀：

var googleMapSrc = @"https://maps.googleapis.com/maps/api/js?key=" + @ETrackerUser.ETrackerUserConfig._MapApiKey.Trim() + @"&callback=initMap";

Html：

<div id="mapContainer" style="width:100%; height:100%">
</div>

脚本：

<script type="text/javascript">
    var locations = JSON.parse($('#CoordinatesModel').val());

    var geocoder;
    var map;

    function initMap() {

        setTimeout(function () {
            var html = '<div id="map" style="height:600px;"></div>';
            $('#mapContainer').html(html);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: {lat: -25.363, lng: 131.044},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            google.maps.event.addListener(map, "idle", function () {
                google.maps.event.trigger(map, 'resize');
            });

        }, 2000);
        setTimeout(function () {
            google.maps.event.trigger(map, 'resize');
            map.setZoom(map.getZoom());
        }, 5000);
    }
</script>

<script async defer src="@googleMapSrc"></script>

图片：

初始加载：

移动到初始加载的左侧：

缩小：

注意：

我甚至尝试使用simple map example code，但仍会产生相同的错误。

发现问题

这非常非常愚蠢。当我使用Internet Explorer时，一切都很好。目前我的默认浏览器是谷歌浏览器。谷歌浏览器搞砸了这张谷歌地图（太奇怪了，太愚蠢了）。

我不知道这是一个错误还是我的chrome配置有问题。

如果有人知道这个问题，请帮助我。

现在我将使用Internet Explorer。

Answer 1

好吧我的网站css有问题。 img只应该为页面max-width: none !important。