Scrimzz
New Coder
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<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.79739623598074, lng: 11.032570624262911 },title: "Norge", info: "Norge", type: "norge", },
{ position: { lat: 60.79970028845114, lng: 11.026986533572648 }, title: "Spania", info: "Spania.", type: "forestilling" },
{ position: { lat: -33.923036, lng: 151.259052 }, title: "Coogee Beach", info: "Dette er Coogee Beach.", type: "aktivitet" },
{ position: { lat: -34.028249, lng: 151.157507 }, title: "Cronulla Beach", info: "Dette er Cronulla Beach.", type: "forestilling" },
{ position: { lat: -33.800101, lng: 151.287478 }, title: "Manly Beach", info: "Dette er Manly Beach.", type: "konsert" },
{ position: { lat: -33.950198, lng: 151.259302 }, title: "Maroubra Beach", info: "Dette er Maroubra Beach.", type: "utstilling" },
{ position: { lat: 60.79970028845114, lng: 11.026986533572648 }, title: "Spania", info: "Spania", type: "forestilling" },
];
function getMarkerIcon(type) {
let icon;
switch (type) {
case "norge":
icon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
break;
case "aktivitet":
icon = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
break;
case "forestilling":
icon = "http://maps.google.com/mapfiles/ms/icons/pink-dot.png";
break;
case "konsert":
icon = "http://maps.google.com/mapfiles/ms/icons/purple-dot.png";
break;
case "utstilling":
icon = "http://maps.google.com/mapfiles/ms/icons/ltblu-dot.png";
break;
default:
icon = null;
}
return icon;
}
flagPositions.forEach(flag => {
const marker = new google.maps.Marker({
position: flag.position,
map: map,
title: flag.title,
icon: getMarkerIcon(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 "norge":
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;
top: 75%; /* Adjust position */
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 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;
width: 80%; /* Adjust width for responsiveness */
max-width: 200px; /* Set maximum width to prevent stretching */
}
#filters label.konsert {
background-color: #ff0000;
color: #fff;
}
}
