Google Maps Api显示灰色地图 [英] Google Maps Api shows grey map

问题描述

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

I'm trying to integrate Google Maps Javascript API in my wordpress website.

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

I created an API key, and I added a pure html code block in my page.

之前效果很好，但现在只显示灰色部分.当我缩小并拖动地图时，可以看到以下图片:

Before it worked perfectly, but now it only show a grey piece. When I zoom out and drag the map around, the following picture is visible:

这是我在html块中的代码:

This is my code in the 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>

是的，我在代码中用API密钥替换了YOUR-API-KEY(这是为了让其他人不会使用生成的代码).

And YES, I replaced YOUR-API-KEY with my API key in my code (this is just so others won't use the generated code).

我不知道地图出了什么问题.我的网络控制台没有错误.

I don't know what is wrong with the map. I do not have errors in my webconsole.

提前谢谢！

推荐答案

在调整地图div的大小后，请在initMap()中调用google.maps.event.trigger(map，'resize').

Call google.maps.event.trigger(map, 'resize') inside initMap() as you have resized the map div.

 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')
}

这篇关于Google Maps Api显示灰色地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！