document.addEventListener('DOMContentLoaded', () => {
const map = L.map('map').setView([38.9175, 139.8353], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// カスタムアイコンを定義
const customIcon = L.icon({
iconUrl: 'images/marker-icon.png', // カスタムマーカー画像のパス
iconSize: [32, 32], // マーカーのサイズ
iconAnchor: [16, 32], // アイコンの「足」の位置
popupAnchor: [0, -32] // ポップアップの表示位置
});
// 店舗データ
const snacks = [
{ name: "スナック緑",
lat: 38.91784466465069,
lng: 139.83580858552295,
description1: "定休日:月曜日 営業時間 19:00〜0:00",
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックLink",
lat: 38.918328820566366,
lng: 139.83473570196918,
description1: "定休日:なし 営業時間 20:00〜1:00",
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックCherir",
lat: 38.91731041980675,
lng: 139.8348859056667,
description1: "定休日:日曜日 営業時間 20:00〜0:00",
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック待夢里",
lat: 38.9161802,
lng: 139.8314272,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "アモーレ",
lat: 38.9182771,
lng: 139.8339734,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックRJ",
lat: 38.9197306,
lng: 139.8300578,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック美麗",
lat: 38.9189692,
lng: 139.8318661,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックエミ",
lat: 38.9177248,
lng: 139.8352511,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック・ジャスミン",
lat: 38.9173162,
lng: 139.8360995,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "ラボンヌ",
lat: 38.9198029,
lng: 139.830132,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "セブンマキ",
lat: 38.9188466,
lng: 139.8328239,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "ドルフィン",
lat: 38.9176609,
lng: 139.8336603,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "パラダイス。",
lat: 38.9180537,
lng: 139.8313297,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック志保",
lat: 38.9178898,
lng: 139.8349414,
description1: "定休日：日、月",
description2: "営業時間：20:30〜0:30",
description3: "店内情報：店内は落ち着いた雰囲気で、スナックには窓がない、置いてるお酒はママの好みで年齢層はやや高め。",
mama: "ママメモ：ママはワインがすき。",
img1: 'images/siho1.jpg',
img2: 'images/siho2.jpg',
icon: 'images/favicon-32x32.png' // 個別アイコンのパス
},
{ name: "スナック+マーブル",
lat: 38.918994,
lng: 139.8341698,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックCline",
lat: 38.9180537,
lng: 139.8313297,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "セレナーデ",
lat: 38.9177181,
lng: 139.834623,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック バタフライ",
lat: 38.9180537,
lng: 139.8313297,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックゆーみん",
lat: 38.9180537,
lng: 139.8313297,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックKa・Na・De",
lat: 38.91762,
lng: 139.83947,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックわかな",
lat: 38.9203849,
lng: 139.8388024,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "ゆーとぴあ〔夢想郷〕",
lat: 38.9214027,
lng: 139.8432495,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック+暖",
lat: 38.9203021,
lng: 139.8343288,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナックべに花",
lat: 38.91796,
lng: 139.83456,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "スナック・プルメリア",
lat: 38.9175525,
lng: 139.8314215,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "ふらっと",
lat: 38.9213477,
lng: 139.8433158,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "シーズ",
lat: 38.9196868,
lng: 139.8277188,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "Glossy★",
lat: 38.9179889,
lng: 139.8310129,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "Snack+Roppongi",
lat: 38.9214815,
lng: 139.8244913,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "OPENHEART",
lat: 38.9201247,
lng: 139.8341646,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "リヨン2",
lat: 38.918098668221646,
lng: 139.83401441368036,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "K",
lat: 38.909465506993946,
lng: 139.83573882021062,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "シャングリラ",
lat: 38.918033,
lng: 139.8338931,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "サラ",
lat: 38.9196951473271,
lng: 139.8321927134644,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "CAROL",
lat: 38.9180039,
lng: 139.8353658,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "クオーレ",
lat: 38.9176328,
lng: 139.8341622,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "ブルーローズ",
lat: 38.9180112,
lng: 139.835356,
icon: 'images/snack-icon.png' // 個別アイコンのパス
},
{ name: "CLUB Ma Cherie",
lat: 38.9178582,
lng: 139.8339079,
description1: "定休日：日",
description2: "営業時間：20:00〜0:00",
description3: "店内情報：カラオケがなく、お話がメインのお店。接待の方でも使えるお店となっており、年齢の若い子から大人のキャストもいるため話が合わないことがない。",
mama: "ママの一言：20代から30代のキャストが揃っています、きれいな子たちとお話ができるのでぜひ来てください。",
img1: 'images/ma cheri1.JPG',
img2: 'images/ma cheri2.JPG',
icon: 'images/favicon-32x32.png' // 個別アイコンのパス
}
];
let markers = [];
// マーカーを追加し、ポップアップを設定
snacks.forEach(snack => {
const markerIcon = L.icon({
iconUrl: snack.icon || 'images/marker-icon.png', // 個別アイコンまたはデフォルトアイコン
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map);
const popupContent = `
<div class="popup-content">
<h3>${snack.name}</h3>
<p>${snack.description1 || ''}</p>
<p>${snack.description2 || ''}</p>
<p>${snack.description3 || ''}</p>
<p>${snack.mama || ''}</p>
<img src="${snack.img1}" width="106" height="73" onclick="openModal('${snack.img1}')" style="cursor: pointer;" />
<img src="${snack.img2}" width="106" height="73" onclick="openModal('${snack.img2}')" style="cursor: pointer;" />
<button onclick="addToFavorites('${snack.name}')">行きたいお店リストに追加</button>
</div>
`;
marker.bindPopup(popupContent);
markers.push({ marker, name: snack.name });
});
// リスト追加機能
window.addToFavorites = function(name){
const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
favorites.push({ name, addedAt: new Date().toISOString() });
localStorage.setItem('favorites', JSON.stringify(favorites));
alert(`${name}を行きたいお店リストに追加しました！`);
};
// モーダルの開閉操作
window.openModal = function (imageSrc) {
const modal = document.getElementById('image-modal');
const modalImage = document.getElementById('modal-image');
modalImage.src = imageSrc; // クリックした画像のソースを設定
modal.style.display = 'block'; // モーダルを表示
};
window.closeModal = function () {
const modal = document.getElementById('image-modal');
modal.style.display = 'none'; // モーダルを非表示
};
// モーダル外をクリックして閉じる
window.onclick = function (event) {
const modal = document.getElementById('image-modal');
if (event.target === modal) {
modal.style.display = 'none';
}
};
});
