Overlay above google maps

Scrimzz · May 21

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;
  }
}

Sign In

Overlay above google maps

Recommended Posts

Scrimzz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity