google-maps-api-3 - 大屏幕上的 Google Maps API 故障

Question

我有一个使用谷歌地图javascript api显示为全宽横幅的谷歌地图
导航地图时，我经常看到一些部分直到我到达某个点才被渲染
它​​似乎只发生在大屏幕> 2000px（在我的情况下为2500px）

您可以看到这里发生的故障：https ://codepen.io/DamienGR/pen/poEgMdN （我已经删除了我的 api 密钥，但无论有没有 api 密钥，它都会做同样的事情）
在这个例子中，当我导航到在东方，到达“乌克兰”后，我总是看到一个大约 300px 的灰色框。仅当我继续导航时才会显示丢失的部分（但如果我停在那里则永远不会加载）

我制作了一个 gif 以便您可以看到它，以防您的屏幕不够大而无法复制：

编码 ：

    <div id="map" style="width: 100%; height: 500px;"></div>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>

    <script>
    function initMap() {
      var mapOpts = {
          center: {lat: 50.46222396587356, lng: -30.968595685134837},
          zoom: 6,
      };
      
      var map = new google.maps.Map(document.getElementById('map'), mapOpts);
    }
    </script>

知道我该如何解决吗？
谢谢 ！

标签： google-maps-api-3