Maps JavaScript API is not executing-CodePudding

i am unable to get the map, with the code below, instead i am getting blank , please help me in finding the error in the code.

  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
  <body>
    <div id="map"></div>

 
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

I use the following CSS

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

And use the following JS

 let map;

function initMap() {
  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

CodePudding user response：

I executed your whole script, there is a mistake in the javascript, instead of map = new Map use this map=new google.maps.Map. Please check the script below

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}