Newer
Older
2023-Haruto / leaflet / map / otakaraman / sakata-map.js
@”2022-Araki” ”2022-Araki” on 29 Jan 2024 820 bytes kkkk
document.addEventListener("DOMContentLoaded", () => {
  var map = L.map("map").setView([38.9204, 139.8452], 14); // 酒田市の中心位置

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  fetch('sakata.json')
    .then(response => response.json())
    .then(data => {
      data.shops.forEach(shop => {
        var marker = L.marker([shop.lat, shop.lng]).addTo(map);
        marker.bindPopup('<b>' + shop.name + '</b><br/><a href="' + shop.url + '">詳細を見る</a>');
        marker.on('click', function(e) {
          window.location.href = shop.url;
        });
      });
    })
    .catch(error => console.error('Error fetching data:', error));
}, false);