// 店舗データ
const snacks = [
{ id: 1, name: "スナック緑", lat: 38.91784466465069, lon: 139.83580858552295, type: "定休日:月曜日 営業時間 19:00〜0:00" },
{ id: 2, name: "スナックLink", lat: 38.918328820566366, lon: 139.83473570196918, type: "定休日:なし 営業時間 20:00〜1:00" },
{ id: 3, name: "スナックCherir", lat: 38.91731041980675, lon: 139.8348859056667, type: "定休日:日曜日 営業時間 20:00〜0:00" }
];
// 地図の初期設定
const map = L.map('map').setView([38.9178, 139.8351], 16);
// OpenStreetMapのタイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// マーカーを格納する配列
let markers = [];
// スナックのマーカーを追加
function addMarkers() {
snacks.forEach(snack => {
const marker = L.marker([snack.lat, snack.lon]).addTo(map);
marker.bindPopup(createPopupContent(snack));
markers.push(marker);
});
}
// ポップアップの内容を作成
function createPopupContent(snack) {
const div = document.createElement('div');
div.innerHTML = `
<h3>${snack.name}</h3>
<p> ${snack.type}</p>
<button onclick="addToFavorites(${snack.id})">お気に入りに登録</button>
`;
return div;
}
// お気に入り登録用のローカルストレージ管理
function addToFavorites(id) {
let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
const snack = snacks.find(s => s.id === id);
if (snack && !favorites.some(f => f.id === id)) {
favorites.push({...snack, dateAdded: new Date().toISOString()});
localStorage.setItem('favorites', JSON.stringify(favorites));
alert(`${snack.name}をお気に入りに追加しました。`);
}
}
// 検索機能
document.getElementById('search').addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
snacks.forEach((snack, index) => {
if (snack.name.toLowerCase().includes(searchTerm) || snack.type.toLowerCase().includes(searchTerm)) {
markers[index].addTo(map);
} else {
map.removeLayer(markers[index]);
}
});
});
// ジオロケーション
function showUserLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
const userLocation = [position.coords.latitude, position.coords.longitude];
L.marker(userLocation).addTo(map)
.bindPopup("あなたの現在地")
.openPopup();
map.setView(userLocation, 13);
});
}
}
// 初期化
addMarkers();
showUserLocation();