Google Maps Api显示灰色地图

Question

我正在尝试在我的wordpress网站中集成Google Maps Javascript API。

我创建了一个API密钥，并在页面中添加了一个纯HTML代码块。

在它完美运作之前，但现在它只显示一个灰色的部分。 当我缩小并拖动地图时，可以看到以下图片：

这是我在html块中的代码：

<div id="googlemaps"></div>
<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('googlemaps'), {
            center: {lat: 51.341667, lng: 4.21444},
            zoom: 8
         });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>

是的，我在我的代码中用我的API密钥替换了YOUR-API-KEY（这是其他人不会使用生成的代码）。

我不知道地图有什么问题。 我的webconsole中没有错误。

提前致谢！

Answer 1

 <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('googlemaps'), { center: {lat: 51.341667, lng: 4.21444}, zoom: 8, backgroundColor: '#fffff', }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap" async defer></script 

 <div id="googlemaps"></div> 

使用backgroundColor属性

Answer 2

在调整map div的大小时，在initMap（）中调用google.maps.event.trigger（map，'resize'）。

 var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('googlemaps'), {
        center: {lat: 51.341667, lng: 4.21444},
        zoom: 8
     });
google.maps.event.trigger(map, 'resize')
}