Adding google map with a marker to the site-CodePudding

The map is not showing the location marker, any way to solve this issue?

<!DOCTYPE html>
<html>
  <head>
    <title>Add Map</title>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>

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

The CSS is as follows:

#map {
  height: 400px;
  width: 100%;
}

The JavaScript is as follows:

  const uluru = { lat: -25.344, lng: 131.036 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });

CodePudding user response：

You missed the function initMap() , kindly wray your JS code with this function, as follows:

function initMap() {
  const uluru = { lat: -25.344, lng: 131.036 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}