Google Maps Api shows grey map

Question

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

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:

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>

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.

Thanks in advance!

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> 

Use backgroundColor property

Answer 2

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