diff --git a/shonai_tiiki_map.js b/shonai_tiiki_map.js
index 340cd4a..9d35ea1 100644
--- a/shonai_tiiki_map.js
+++ b/shonai_tiiki_map.js
@@ -1,5 +1,5 @@
document.addEventListener('DOMContentLoaded', () => {
- const map = L.map('map').setView([38.855235,139.910744], 16);
+ const map = L.map('map').setView([38.855235, 139.910744], 16);
// OSMタイル
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -12,50 +12,51 @@
header: true,
complete: function(results) {
results.data.forEach(row => {
- if (row.latitude && row.longitude) {
- const lat = parseFloat(row.latitude);
- const lng = parseFloat(row.longitude);
+ if (row.緯度 && row.経度) {
+ const lat = parseFloat(row.緯度);
+ const lng = parseFloat(row.経度);
- // 説明文(空欄は無視)
- const descriptions = [row.description1, row.description2, row.description3]
+ // 説明1~説明9を動的にまとめてポップアップ用HTML生成
+ const descriptions = Array.from({ length: 9 }, (_, i) => row[`説明${i + 1}`])
.filter(desc => desc && desc.trim() !== "")
.map(desc => `
${desc}
`)
.join("");
- // 画像処理(空欄は完全に無視、クリックでモーダル)
+ // 画像処理(空欄は無視、クリックでモーダル表示)
let images = "";
- if (row.img1 && row.img1.trim() !== "") {
- images += `
`;
+ if (row.画像1 && row.画像1.trim() !== "") {
+ images += `
`;
}
- if (row.img2 && row.img2.trim() !== "") {
- images += `
`;
+ if (row.画像2 && row.画像2.trim() !== "") {
+ images += `
`;
}
// ポップアップ内容
const popupContent = `
`;
- // アイコンをCSVから取得、なければデフォルト
- const iconUrl = row.icon && row.icon.trim() !== "" ? row.icon : "images/defaultpin.png";
+ // アイコン設定。CSVのアイコンが空ならデフォルト
+ const iconUrl = row.アイコン && row.アイコン.trim() !== "" ? row.アイコン : "images/defaultpin.png";
const customIcon = L.icon({
iconUrl: iconUrl,
- iconSize: [32, 32], // アイコンサイズ
- iconAnchor: [16, 32], // ピンの先端位置
- popupAnchor: [0, -32] // ポップアップの位置
+ iconSize: [32, 32],
+ iconAnchor: [16, 32],
+ popupAnchor: [0, -32]
});
- // マーカー追加(独自アイコン付き)
+ // マーカー追加してポップアップをバインド
L.marker([lat, lng], { icon: customIcon }).addTo(map).bindPopup(popupContent);
}
});
}
});
+ // モーダル表示関数
window.openModal = function(imageSrc) {
const modal = document.getElementById('image-modal');
const modalImage = document.getElementById('modal-image');
@@ -63,12 +64,13 @@
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) {