Hola a todos, estoy tratando de agregar un mapa de Google a mi sitio web, estoy usando Maps javascript api para obtener el mapa a continuación, he creado un ejemplo mínimo reproducible porque hay mucho más en el html (el sitio web no está activo, estoy usando el servidor activo) extensión en vscode) me aseguré de tener una cuenta facturable vinculada con el proyecto en el tablero de Google, sin restricciones de API y la API está de hecho activada y no deshabilitada, antes de tener el script dentro del div 'main-container' y moverlo pensando que se estaba llamando antes de que se representara el div del mapa, pero eso aún no solucionó el problema, soy un novato de javascript, por lo que si alguien ya respondió esta pregunta, con gusto la eliminaré, pero no estoy seguro de qué hacer.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="Styles.css"> <title>LeadFinder</title> </head> <body> <div class="main"> <div class="main__container"> <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>aquí está el css para el div 'mapa' y el contenedor principal y principal
.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; }cuando compruebo usando las herramientas de desarrollo de google me sale este 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)Editar: at initMap apunta a esta línea
var map = google.maps.Map(document.getElementById('map')Te perdiste new en var map = google.maps.Map(document.getElementById('map') Debería ser var map = new google.maps.Map(document.getElementById('map')