Google Maps Javascript API does not work for me

I have a problem with the API because it does not show me the map and the browser console does not show me errors, I leave the code because I really can not find the error, my application is in Angular and it is not in production in this moment.

I attach the browser code and console. Thank you very much!

<script>
   function initMap() {
    console.log("hola");
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
   });
   var marker = new google.maps.Marker({
     position: uluru,
     map: map
   });
 } 
</script>



<div id="map"></div>
  <!-- Replace the value of the key parameter with your own API key. -->    

<script async defer src="https://maps.googleapis.com/maps/api/js?key=--aqui 
inserte mi key --&callback=initMap"></script>

I leave my full html -------

             <div class="card mb-3">
              <img class="card-img-top" src="../../../assets/images/ciudades/moscu.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title"> ---NOMBRE CIUDAD --- </h5>
                <p class="card-text">  

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ligula a ipsum bibendum pharetra a nec leo. Vestibulum tempus ipsum orci, et finibus tellus hendrerit eget. Nam at consequat velit, id iaculis risus. Curabitur mollis dolor sit amet molestie faucibus. Pellentesque ut malesuada felis. Maecenas velit nisi, euismod non ullamcorper ut, porttitor vel sem. Vestibulum ac dolor nec lacus mattis tincidunt non ac ante. Etiam nec faucibus tortor. In commodo pellentesque turpis, nec iaculis elit blandit pellentesque. Donec sit amet suscipit velit. Etiam urna magna, tempus sit amet rutrum sed, rhoncus quis orci. Nulla ut leo turpis. Donec laoreet lectus sed pretium luctus. In eleifend quis odio in fermentum. Aliquam facilisis erat nec sagittis hendrerit. Pellentesque condimentum, diam vitae rutrum pretium, neque enim lobortis tellus, nec mattis nisi tellus a magna.
                  Donec vel ornare orci, et varius nulla. Ut efficitur vitae dolor ac consequat. Sed nec tincidunt purus. Praesent at venenatis dui. Phasellus facilisis at felis vitae gravida. Aenean luctus, felis eget euismod sollicitudin, ipsum magna ultricies elit, eget sagittis tellus odio sit amet arcu. Maecenas at augue urna. Donec sed convallis enim. Mauris dui dolor, aliquam ac rhoncus in, sollicitudin quis turpis. Vestibulum faucibus sit amet ex eget auctor. Nunc commodo eget massa et finibus. Mauris ornare quis quam id finibus. Duis lobortis suscipit tellus, eget ornare tellus tristique non. Curabitur eu cursus augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin faucibus ipsum ac posuere consectetur.   

                </p>

              </div>
            </div>



            <div class="card mb-3">
              <div class="card-body">
                <h5 class="card-title">Lugares Históricos</h5>
                <p class="card-text">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ligula a ipsum bibendum pharetra a nec leo. Vestibulum tempus ipsum orci, et finibus tellus hendrerit eget. Nam at consequat velit, id iaculis risus. Curabitur mollis dolor sit amet molestie faucibus. Pellentesque ut malesuada felis. Maecenas velit nisi, euismod non ullamcorper ut, porttitor vel sem. Vestibulum ac dolor nec lacus mattis tincidunt non ac ante. Etiam nec faucibus tortor. In commodo pellentesque turpis, nec iaculis elit blandit pellentesque. Donec sit amet suscipit velit. Etiam urna magna, tempus sit amet rutrum sed, rhoncus quis orci. Nulla ut leo turpis. Donec laoreet lectus sed pretium luctus. In eleifend quis odio in fermentum. Aliquam facilisis erat nec sagittis hendrerit. Pellentesque condimentum, diam vitae rutrum pretium, neque enim lobortis tellus, nec mattis nisi tellus a magna. Donec vel ornare orci, et varius nulla. Ut efficitur vitae dolor ac consequat. Sed nec tincidunt purus. Praesent at venenatis dui. Phasellus facilisis at felis vitae gravida. Aenean luctus, felis eget euismod sollicitudin, ipsum magna ultricies elit, eget sagittis tellus odio sit amet arcu. Maecenas at augue urna. Donec sed convallis enim. Mauris dui dolor, aliquam ac rhoncus in, sollicitudin quis turpis. Vestibulum faucibus sit amet ex eget auctor. Nunc commodo eget massa et finibus. Mauris ornare quis quam id finibus. Duis lobortis suscipit tellus, eget ornare tellus tristique non. Curabitur eu cursus augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin faucibus ipsum ac posuere consectetur.



                </p>
              </div>

            </div>



            <script>
                function initMap() {
                  console.log("hola");
                  var uluru = {lat: -25.363, lng: 131.044};
                  var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: uluru
                  });
                  var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                  });
                }
            </script>


            <h3>My Google Maps Demo</h3>
                <div id="map" ></div>
                <!-- Replace the value of the key parameter with your own API key. -->




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