Google Maps Javascript API在JS Fiddle中运行，但未在localhost中显示

如何解决Google Maps Javascript API在JS Fiddle中运行，但未在localhost中显示

我现在开始使用Angular，并且我一直在尝试使该地图显示几个小时，但我不确定自己做错了什么。据我所知，控制台中没有错误。这是我的代码（可以按预期在JS fiddle中使用）：

<!DOCTYPE html>
<html>
  <head>    
  </head>
  <body>
  
  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBIM3O5NdgiqougH2s2vQzHC2_9Mof7Owo&callback=initMap"
      defer></script>
    
  <div id="map"></div>
  <script>
    console.log("log")  
    let map;
    function initMap() {
      map = new google.maps.Map(document.getElementById("map"),{
        center: {
          lat: -34.397,lng: 150.644
        },zoom: 8
      });
    }
  </script>
    
  </body>
</html>

#map {
        height: 500px;
        margin: 0; padding: 0;
      }
      
      html,body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

我尝试过的事情：

从API密钥中删除限制
将URL从https更改为http
删除延迟属性
使用px和％设置#map的高度
检查带有功能的脚本标签是否正在执行。（再次，该日志显示在JS fiddle中，但未显示在开发工具控制台中，这表示脚本未执行？）

任何提示将不胜感激！