Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

Scrimzz

New Coder
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.

HTML:
<!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>
CSS:
#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;
  }
}
 
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.
 

New Threads

Buy us a coffee!

Back
Top Bottom