Google Maps Api Shows Grey Map

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 no

Solution 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

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