Test

16. April 2025 admin
0 Comment
Uncategorized
<!DOCTYPE html>
<html>
<head>
  <title>Hytteforeningens Medlemskart</title>
  <meta charset="utf-8">
  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FgU9gJYSAhXwPHMy8CUfwhpDNycPiLg"></script>
  <script>
    function initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 7,
        center: { lat: 60.472, lng: 8.4689 }, // Sentralt i Norge
      });

      const geocoder = new google.maps.Geocoder();

      const members = [
        { navn: "Akerlie Erling", adresse: "Finsebyen 63, 5705 VOSS", telefon: "913 31 165", epost: "eakerli@online.no" },
        { navn: "Anderssen / Thuestad Liv F og Thore C", adresse: "Vestre Rallarvegen 220, 5053 BERGEN", telefon: "913 74 724", epost: "thclth@online.no" },
        { navn: "Bakke Stein", adresse: "Vestre Rallarvegen 484, 5226 NESTTUN", telefon: "952 72 820", epost: "sbakke@outlook.com" },
        { navn: "Bakke Bjørn", adresse: "Vestre Rallarvegen 484, 5115 ULSET", telefon: "977 49 749", epost: "liverbbb@gmail.com" },
        { navn: "Skjerven Arne", adresse: "Finsebyen 33, 5730 ULVIK", telefon: "922 94 965", epost: "arnskjer@online.no" },
      ];

      members.forEach(member => {
        geocoder.geocode({ address: member.adresse }, (results, status) => {
          if (status === "OK") {
            const marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
            });

            const infowindow = new google.maps.InfoWindow({
              content: `<strong>${member.navn}</strong><br>
                        ${member.adresse}<br>
                        Tlf: ${member.telefon}<br>
                        E-post: <a href='mailto:${member.epost}'>${member.epost}</a>`
            });

            marker.addListener("click", () => {
              infowindow.open(map, marker);
            });
          } else {
            console.error("Geokoding feilet for", member.adresse, status);
          }
        });
      });
    }
  </script>
</head>
<body onload="initMap()">
  <div id="map"></div>
</body>
</html>