How can I add a overlay above google maps? With HTML and CSS

[Scrimzz]

I want to add an overlay of another map over the google maps map. But I still want it to be interactive. And that I can add markers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Stoppested Verden Kart</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  
</head>
<body>
    <div id="map"></div>

    <div id="filters">
        <input type="checkbox" id="verksted" checked> <label for="verksted" class="verksted">Verksted</label>
        <input type="checkbox" id="aktivitet" checked> <label for="aktivitet" class="aktivitet">Aktivitet</label>
        <input type="checkbox" id="forestilling" checked> <label for="forestilling" class="forestilling">Forestilling</label>
        <input type="checkbox" id="konsert" checked> <label for="konsert" class="konsert">Konsert</label>
        <input type="checkbox" id="utstilling" checked> <label for="utstilling" class="utstilling">Utstilling</label>
    </div>

    <script>
        function initMap() {
            const mapOptions = {
                center: { lat: 60.79992411579096, lng: 11.02675478327073 },
                zoom: 13,
                mapId: '1ec958ada62632ae'
            };
            

            const map = new google.maps.Map(document.getElementById('map'), mapOptions);

            const flagPositions = [
                { position: { lat: 60.7980456443033, lng: 11.030497521560092 },title: "Norge", info: "NORGE", type: "verksted", },
                { position: { lat: 60.79970028845114, lng: 11.026986533572648 }, title: "Spania", info: "SPANIA", type: "forestilling" },
                { position: { lat: 60.79917180159801, lng: 11.027870741939056 }, title: "India", info: "INDIA", type: "aktivitet" },
                { position: { lat: 60.79744467714585, lng: 11.033924462799297 }, title: "Ukraina", info: "UKRAINA", type: "konsert" },
                { position: { lat: 60.7976639398414, lng: 11.033981340553646 }, title: "India", info: "INDIA", type: "utstilling" }
            ];

            function getMarkerIcon(type) {
                let icon;
                switch (type) {
                    case "verksted":
                        icon = "/Bilder/verksted.svg";
                        break;
                    case "aktivitet":
                        icon = "/Bilder/aktivitet.svg";
                        break;
                    case "forestilling":
                        icon = "Bilder/forestilling.svg";
                        break;
                    case "konsert":
                        icon = "/Bilder/konsert.svg";
                        break;
                    case "utstilling":
                        icon = "Bilder/utstilling.svg";
                        break;
                    default:
                        icon = null;
                }
                return icon;
            }
            

            flagPositions.forEach(flag => {
    const marker = new google.maps.Marker({
        position: flag.position,
        map: map,
        title: flag.title,
        icon: {
            url: getMarkerIcon(flag.type),
            scaledSize: new google.maps.Size(50, 50) // Endre størrelsen etter behov
        },
        // Legg til class basert på flaggtypen
        // Dette lar deg style markørene forskjellig basert på typen
        // Du kan også bruke disse classene til å filtrere markørene
        // ved å bruke CSS eller JavaScript
        // Her legger jeg til 'marker' + flag.type for å lage unike class-navn
        // for hver type markør
        class: 'marker ' + flag.type
    });

    flag.marker = marker;

    const infoWindow = new google.maps.InfoWindow({
        content: flag.info
    });

    marker.addListener('mouseover', () => {
        infoWindow.open(map, marker);
    });

    marker.addListener('mouseout', () => {
        infoWindow.close();
    });
});


            function filterMarkers() {
                const verkstedChecked = document.getElementById("verksted").checked;
                const aktivitetChecked = document.getElementById("aktivitet").checked;
                const forestillingChecked = document.getElementById("forestilling").checked;
                const konsertChecked = document.getElementById("konsert").checked;
                const utstillingChecked = document.getElementById("utstilling").checked;

                flagPositions.forEach(flag => {
                    const marker = flag.marker;
                    switch (flag.type) {
                        case "verksted":
                            marker.setVisible(verkstedChecked); // Endre synligheten basert på verkstedChecked
                            break;
                        case "aktivitet":
                            marker.setVisible(aktivitetChecked);
                            break;
                        case "forestilling":
                            marker.setVisible(forestillingChecked);
                            break;
                        case "konsert":
                            marker.setVisible(konsertChecked);
                            break;
                        case "utstilling":
                            marker.setVisible(utstillingChecked);
                            break;
                    }
                });
            }

            filterMarkers();

            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.addEventListener('change', filterMarkers);
            });
        }
    </script>
</body>
</html>

#map {
  height: 99vh;
  width: 100%;
  position: relative;
  font-family: "Open Sans", sans-serif;
}

#filters {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

#filters label {
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
}

#filters label.verksted {
  background-color: #4bae4b;
  color: #fff;
}

#filters label.aktivitet {
  background-color: #f6d109;
  color: #fff;
}

#filters label.forestilling {
  background-color: #e42085;
  color: #fff;
}

#filters label.konsert {
  background-color: #4d4084;
  color: #fff;
}

#filters label.utstilling {
  background-color: #65b3cc;
  color: #fff;
}
.farge {
  color: white;
}

@media only screen and (max-width: 600px) {
  #filters {
    position: absolute;
    bottom: 3.5%; /* Juster avstanden fra toppen */
    left: 5%; /* Juster avstanden fra høyre */
    transform: none; /* Nullstill transformasjonen */
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column; /* Endre retningen til vertikal */
    justify-content: flex-start; /* Juster justeringen til start */
    align-items: center;
    font-weight: bold;
    font-family: "Open Sans", sans-serif;
    width: 30%; /* Juster bredden etter behov */
    height: auto;
  }
  #filters label.konsert {
    background-color: #4d4084;
    color: #fff;
  }
  #filters label {
    margin: 5px 0; /* Juster mellomrom mellom etikettene */
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    width: 100%; /* Fyll hele bredden */
    height: auto;
    text-align: center; /* Senter tekst */
  }
  #filters input[type="checkbox"] {
    width: 15px;
    height: 15px;
}
#map:focus {
  bottom: 3.125rem;
}

  #map {
    height: 99vh;
    width: 100%;
    position: relative;
    font-family: "Open Sans", sans-serif;
  }
}

 

[Johna]

Set the parent element containing both the map and the overlay to relative positioning, then set the overlay to absolute positioning so that it goes over the map.
Then add pointer-events: none; to the overlay so any mouse events go through to the map.