Uncaught type error this.set is not a function (maps javascript api)-CodePudding

Hi all so i am attempting to add a google map to my website, im using Maps javascript api to get the map below ive created a minimal reproducible example because there is much more to the html(the website is not live im using the live server extension on vscode) i made sure to have a billable account linked with the project on googles dashboard, no api restrictions and the api is in fact activated and not disabled, before i had the script inside the 'main-container' div and moved it thinking it was being called before the map div is being rendered but that still has not fixed the issue, i am a javascript noob so if anyone has already answered this question ill gladly delete this one but i am unsure of what to do

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Styles.css">
<title>LeadFinder</title>
</head>
<body>
<div >
      <div >
          <div id = "map"></div>  
          <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXX&callback=initMap" async></script>   
      </div>
</div>
<script>
        function initMap(){
            var location = new google.maps.LatLng(-25.363, 133.522);
            var map = google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: location
            });
            var marker = new google.maps.Marker({
                position: location,
                map: map
            })
        }
     </script>    
</body>
</html>

here is the css for the 'map' div and the main and main__container

.main {
    background-color: #454076;
}

.main__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    height: 90vh;
    background-color: #454076;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0 50px;
}
#map{
    height: 100%;
    width: 100%;
    grid-column: span 2;
    grid-row: span 2;

}

when i check using google dev tools i get this error

 Uncaught (in promise) TypeError: this.set is not a function
    at Object.tj [as Map] (jskey=AIzaSyBDIjsf8xmFIVwz1htJz5jccP_t3Q3SzYA&callback=initMap:179:423)
    at initMap (LeadFinder.html:104:35)

Edit: the at initMap points to this line

var map = google.maps.Map(document.getElementById('map')

CodePudding user response：

You missed new in var map = google.maps.Map(document.getElementById('map') It should be var map = new google.maps.Map(document.getElementById('map')