javascript - Google Maps Api 显示灰色 map

Question

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

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

之前它运行得很好，但现在它只显示一个灰色的部分。当我缩小并拖动 map 时，可以看到以下图片:

这是我在 html block 中的代码:

<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>

是的，我在代码中将 YOUR-API-KEY 替换为我的 API key (这只是为了其他人不会使用生成的代码)。

我不知道 map 出了什么问题。我的网络控制台中没有错误。

提前致谢!

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属性