Why is google map not showing?

Question

JavaScript

Hello. Connected the card. Set up a color scheme. But the map is first displayed and after a couple of seconds it disappears and instead of the map an error message and a request to check the console. The console doesn't show any errors.
Link to the site
connected like this

<div class="contacts__map" id="contacts__map"></div><!-- contacts__map End -->

<script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('contacts__map'), {
                center: {lat: 55.756952, lng: 37.603866},
                zoom: 8,
                scrollwheel: false,
                styles: [{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]}]
            });

            var marker = new google.maps.Marker({

                position: {lat: 55.716935, lng: 37.602026},
                map: map,
                title: 'г. Москва, ул. Донская, дом 32',
                icon: 'img/contacts/marker.png'
});
        }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Help identify what the problem is.
Thank you.

Answer 1

Отсутствует ключ
https://developers.google.com/maps/documentation/g...

Answer 2

Why use both async and defer at the same time in this line. use one or the other... or remove them altogether!

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>