please explain why my map is not displayed on the site. Now I have my top bar of the site and a blank white background, but there should be a map. please help me fix it. My API is connected to the project and also billing is connected. I would also like to help with a question regarding adding a lot of markers to Google maps on my website. I ask for help.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Znajdź i zgadnij</title>
<link rel="stylesheet" href="libs/bootstrap-reboot.min.css" />
<link rel="stylesheet" href="libs/bootstrap-grid.min.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script type="module" src="script.js"></script>
</head>
<body>
<div class="main">
<div class="navbar">
<div class="container">
<a href="index.html" class="navbar-brand"
>Słupsk<span class="navbar-brand" id="go">Go</span></a
>
<div class="navbar-wrap">
<ul class="navbar-menu">
<li><a href="zasadygry.html">Zasady gry</a></li>
<li><a href="kontakt.html"> Kontakt</a></li>
</ul>
<a href="mapa.html" class="kontakt">Mapa</a>
</div>
</div>
</div>
</div>
<div id="map"></div>
<script>
function initMap() {
let uluru = { lat: 54.464778, lng: 17.027122 };
let map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
let marker = new google.maps.Marker({ position: uluru, map: map });
}
</script>
<script>
((g) => {
var h,
a,
k,
p = "The Google Maps JavaScript API",
c = "google",
l = "importLibrary",
q = "__ib__",
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set(),
e = new URLSearchParams(),
u = () =>
h ||
(h = new Promise(async (f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g)
e.set(
k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
g[k]
);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => (h = n(Error(p + " could not load.")));
a.nonce = m.querySelector("script[nonce]")?.nonce || "";
m.head.append(a);
}));
d[l]
? console.warn(p + " only loads once. Ignoring:", g)
: (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
})({ key: "AIzaSyDgKBm5DUC", v: "weekly" });
</script>
</body>
</html>