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密钥替换了你的API密钥（这只是因为其他人不会使用生成的代码）。

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

提前致谢！

Answer 1

＆＃13;

＆＃13;

<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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用backgroundColor属性

Answer 2

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{resultados}}
</div>