Update index.html

index.html

@@ -359,6 +359,96 @@
             border-radius: 4px;
             box-shadow: inset 0 0 5px rgba(0, 200, 255, 0.5);
         }
+
+        /* ギャラリー用スタイル */
+        #gallery-container {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 10, 20, 0.95);
+            z-index: 2000;
+            overflow-y: auto;
+            padding: 2rem;
+        }
+
+        .gallery-map-item {
+            background: rgba(0, 20, 40, 0.8);
+            border: 1px solid var(--hacker-border);
+            padding: 1rem;
+            margin-bottom: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .gallery-map-item:hover {
+            background: rgba(0, 40, 80, 0.8);
+            box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
+        }
+
+        .gallery-map-title {
+            color: var(--hacker-primary);
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+
+        .gallery-map-preview {
+            height: 150px;
+            background-color: rgba(0, 30, 60, 0.5);
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--hacker-secondary);
+            font-size: 0.9rem;
+        }
+
+        .gallery-map-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .gallery-btn {
+            flex: 1;
+            padding: 0.5rem;
+            font-size: 0.8rem;
+        }
+
+        #save-map-modal {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 20, 40, 0.95);
+            border: 1px solid var(--hacker-border);
+            padding: 2rem;
+            z-index: 2001;
+            width: 80%;
+            max-width: 500px;
+        }
+
+        #save-map-modal h3 {
+            color: var(--hacker-primary);
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+
+        #save-map-name {
+            width: 100%;
+            margin-bottom: 1rem;
+            background: rgba(0, 10, 20, 0.8);
+            border: 1px solid var(--hacker-border);
+            color: var(--hacker-text);
+            padding: 0.5rem;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            pointer-events: none;
+            cursor: not-allowed;
+        }
     </style>
 </head>
 
@@ -377,11 +467,17 @@
 
     <div class="container mx-auto px-4">
         <div class="flex flex-wrap mb-4">
-            <button id="edit-next-marker" class="hacker-btn secondary">
+            <button id="edit-next-marker" class="hacker-btn secondary disabled">
                 <span class="glow-text">次のマーカーを編集</span>
             </button>
-            <button onclick="if(confirm('すべてのデータが消去されます。いいですか？')){if(confirm('この操作は取り消せません。')){localStorage.removeItem('leafletMap');location.reload()}}" class="hacker-btn danger">
-                <span class="glow-text">すべてリセット</span>
+            <button id="save-map-btn" class="hacker-btn secondary">
+                <span class="glow-text">マップを保存</span>
+            </button>
+            <button id="load-map-btn" class="hacker-btn secondary">
+                <span class="glow-text">マップを読み込み</span>
+            </button>
+            <button onclick="if(confirm('現在のマップのすべてのデータが消去されます。いいですか？')){clearCurrentMap()}" class="hacker-btn danger">
+                <span class="glow-text">現在のマップをリセット</span>
             </button>
         </div>
 
@@ -447,392 +543,677 @@
         </div>
     </div>
 
+    <!-- マップ保存モーダル -->
+    <div id="save-map-modal">
+        <h3>マップを保存</h3>
+        <input type="text" id="save-map-name" placeholder="マップ名を入力">
+        <button id="confirm-save-map" class="hacker-btn">
+            <span class="glow-text">保存</span>
+        </button>
+        <button id="cancel-save-map" class="hacker-btn danger">
+            <span class="glow-text">キャンセル</span>
+        </button>
+    </div>
+
+    <!-- マップギャラリー -->
+    <div id="gallery-container">
+        <div class="container mx-auto">
+            <h2 class="hacker-title text-center">保存されたマップ</h2>
+            <div id="gallery-map-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
+            <div class="text-center mt-4">
+                <button id="close-gallery" class="hacker-btn danger">
+                    <span class="glow-text">閉じる</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/mono-blue.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
     <script>
+        // グローバル変数
+        let map;
+        let editingMarker = null;
+        let hoveredMarker = null;
+        let nextMarkerEdit = false;
+        let markers = [];
+        let currentMapName = '';
+
+        // 初期化処理
         window.onload = function() {
             const loading = document.getElementById('loading');
             loading.style.opacity = '0';
             setTimeout(() => {
                 loading.style.display = 'none';
-                loadMapFromStorage();
+                initMap();
+                updateEditNextMarkerButton();
             }, 1000);
+
+            // イベントリスナーの設定
+            setupEventListeners();
         };
 
-        function saveMapToStorage() {
-            const markers = [];
-            map.eachLayer((layer) => {
-                if (layer instanceof L.Marker) {
-                    const marker = layer;
-                    const icon = marker.options.icon;
-                    const { lat, lng } = marker.getLatLng();
-                    markers.push({
-                        lat: lat,
-                        lng: lng,
-                        iconUrl: icon.options.iconUrl,
-                        iconSize: icon.options.iconSize,
-                        popupContent: marker.getPopup() ? marker.getPopup().getContent() : '',
-                        tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '',
+        // マップ初期化
+        function initMap() {
+            map = L.map("map").setView([33.321797711641395, 130.52061378343208], 16);
+            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { 
+                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors' 
+            }).addTo(map);
+
+            // マーカーイベントの設定
+            map.on("click", function(e) {
+                if (nextMarkerEdit) {
+                    return;
+                }
+
+                if (editingMarker) {
+                    const latlng = e.latlng;
+                    editingMarker.setLatLng([latlng.lat, latlng.lng]);
+                    document.getElementById("marker-lat").value = latlng.lat;
+                    document.getElementById("marker-lng").value = latlng.lng;
+                    updatePreviewSize();
+                    saveCurrentMapToStorage();
+                } else {
+                    const latlng = e.latlng;
+                    const marker = L.marker(latlng).addTo(map);
+                    marker.bindPopup("新しいマーカーのポップアップ");
+                    marker.bindTooltip("新しいマーカーのツールチップ");
+                    
+                    marker.on("mouseover", function() {
+                        hoveredMarker = marker;
+                    });
+                    
+                    marker.on("mouseout", function() {
+                        if (hoveredMarker === marker) {
+                            hoveredMarker = null;
+                        }
                     });
+                    
+                    document.getElementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png";
+                    openEditor(marker);
+                    saveCurrentMapToStorage();
                 }
             });
-            localStorage.setItem('leafletMap', JSON.stringify(markers));
-        }
-        
-        function loadMapFromStorage() {
-            const storedMarkers = JSON.parse(localStorage.getItem('leafletMap'));
-        
-            if (!map) {
-                console.error('マップが見つかりません。再読み込みしてください。');
-                return;
-            }
-        
-            storedMarkers.forEach((data) => {
-                if (!data.iconUrl || !data.iconSize) {
-                    console.error('アイコンのデータがありません。データが破損している可能性があります。');
-                    return;
+
+            // マーカーが変更されたらボタンの状態を更新
+            map.on('layeradd layerremove', function() {
+                updateEditNextMarkerButton();
+            });
+        }
+
+        // イベントリスナーの設定
+        function setupEventListeners() {
+            // マーカー編集関連
+            document.getElementById("save-marker").addEventListener("click", saveMarker);
+            document.getElementById("delete-marker").addEventListener("click", deleteMarker);
+            document.addEventListener("keydown", function(e) {
+                if (e.key === "e" && hoveredMarker) {
+                    openEditor(hoveredMarker);
                 }
-        
-                const icon = L.icon({
-                    iconUrl: data.iconUrl,
-                    iconSize: data.iconSize,
-                    iconAnchor: [data.iconSize[0] / 2, data.iconSize[1]],
-                    popupAnchor: [0, -data.iconSize[1]],
-                    tooltipAnchor: [data.iconSize[0] / 2, -data.iconSize[1] / 2],
-                });
-                const marker = L.marker([data.lat, data.lng], { icon: icon }).addTo(map);
-                if (data.popupContent) marker.bindPopup(data.popupContent);
-                if (data.tooltipContent) marker.bindTooltip(data.tooltipContent);
-        
-                marker.on("mouseover", function() {
-                    hoveredMarker = marker;
-                });
-                marker.on("mouseout", function() {
-                    if (hoveredMarker === marker) {
-                        hoveredMarker = null;
-                    }
-                });
             });
+
+            // アイコン設定関連
+            document.getElementById("marker-icon-upload").addEventListener("change", handleIconUpload);
+            document.getElementById("load-icon-url").addEventListener("click", loadIconFromUrl);
+            document.getElementById("icon-width").addEventListener("input", syncWidth);
+            document.getElementById("icon-width-input").addEventListener("input", syncWidth);
+            document.getElementById("icon-height").addEventListener("input", syncHeight);
+            document.getElementById("icon-height-input").addEventListener("input", syncHeight);
+
+            // マーカー編集モード関連
+            document.getElementById("edit-next-marker").addEventListener("click", toggleEditNextMarkerMode);
+            
+            // マップ保存/読み込み関連
+            document.getElementById("save-map-btn").addEventListener("click", showSaveMapModal);
+            document.getElementById("load-map-btn").addEventListener("click", showGallery);
+            document.getElementById("confirm-save-map").addEventListener("click", saveCurrentMapWithName);
+            document.getElementById("cancel-save-map").addEventListener("click", hideSaveMapModal);
+            document.getElementById("close-gallery").addEventListener("click", hideGallery);
+
+            // マーカーエディタのドラッグ移動
+            setupEditorDrag();
+            
+            // HTML生成関連
+            document.getElementById("generate-html").addEventListener("click", generateMapHTML);
+            document.getElementById("copyButton").onclick = copyHTMLToClipboard;
         }
-        
-        function updatePreviewSize() {
-            var e = document.getElementById("icon-width").value;
-            var t = document.getElementById("icon-height").value;
-            var n = document.getElementById("icon-preview");
-            n.style.width = e + "px";
-            n.style.height = t + "px";
-            document.getElementById("icon-width-value").textContent = e;
-            document.getElementById("icon-height-value").textContent = t;
-            if (editingMarker) {
-                var o = n.src;
-                var i = L.icon({
-                    iconUrl: o,
-                    iconSize: [e, t],
-                    iconAnchor: [e / 2, t],
-                    popupAnchor: [0, -t],
-                    tooltipAnchor: [e / 2, -t / 2]
-                });
-                editingMarker.setIcon(i);
-                saveMapToStorage();
+
+        // マーカー編集モードのトグル
+        function toggleEditNextMarkerMode() {
+            if (nextMarkerEdit) {
+                // 編集モードをキャンセル
+                nextMarkerEdit = false;
+                document.getElementById("edit-next-marker").textContent = "次のマーカーを編集";
+                document.getElementById("edit-next-marker").classList.remove("danger");
+                document.getElementById("edit-next-marker").classList.add("secondary");
+                alert("編集モードをキャンセルしました。");
+            } else {
+                // 編集モードを開始
+                nextMarkerEdit = true;
+                document.getElementById("edit-next-marker").textContent = "編集をキャンセル";
+                document.getElementById("edit-next-marker").classList.remove("secondary");
+                document.getElementById("edit-next-marker").classList.add("danger");
+                alert("クリックして次のマーカーを編集します。");
             }
         }
-    
-        function openEditor(e) {
-            const t = e.getLatLng();
-            document.getElementById("marker-lat").value = t.lat;
-            document.getElementById("marker-lng").value = t.lng;
-            document.getElementById("marker-popup").value = e.getPopup() ? e.getPopup().getContent() : "";
-            document.getElementById("marker-tooltip").value = e.getTooltip() ? e.getTooltip().getContent() : "";
+
+        // マーカーが存在するかどうかでボタンの状態を更新
+        function updateEditNextMarkerButton() {
+            const hasMarkers = mapHasMarkers();
+            const editBtn = document.getElementById("edit-next-marker");
+            
+            if (hasMarkers) {
+                editBtn.classList.remove("disabled");
+            } else {
+                editBtn.classList.add("disabled");
+                // マーカーがない場合、編集モードをキャンセル
+                if (nextMarkerEdit) {
+                    nextMarkerEdit = false;
+                    editBtn.textContent = "次のマーカーを編集";
+                    editBtn.classList.remove("danger");
+                    editBtn.classList.add("secondary");
+                }
+            }
+        }
+
+        // マップにマーカーが存在するかチェック
+        function mapHasMarkers() {
+            let hasMarkers = false;
+            map.eachLayer((layer) => {
+                if (layer instanceof L.Marker) {
+                    hasMarkers = true;
+                }
+            });
+            return hasMarkers;
+        }
+
+        // マーカーエディタを開く
+        function openEditor(marker) {
+            const latlng = marker.getLatLng();
+            document.getElementById("marker-lat").value = latlng.lat;
+            document.getElementById("marker-lng").value = latlng.lng;
+            document.getElementById("marker-popup").value = marker.getPopup() ? marker.getPopup().getContent() : "";
+            document.getElementById("marker-tooltip").value = marker.getTooltip() ? marker.getTooltip().getContent() : "";
             document.getElementById("marker-editor").style.display = "block";
-            editingMarker = e;
-    
-            const icon = e.options.icon;
+            editingMarker = marker;
+
+            const icon = marker.options.icon;
             if (icon && icon.options) {
                 if (icon.options.iconUrl) {
                     document.getElementById("marker-icon-url").value = icon.options.iconUrl;
                     document.getElementById("icon-preview").src = icon.options.iconUrl;
                     document.getElementById("icon-preview").style.display = 'block';
                     document.getElementById("icon-settings").style.display = "block";
-                } else {
-                    document.getElementById("marker-icon-url").value = icon.options.iconUrl;
-                    document.getElementById("icon-preview").src = icon.options.iconUrl;
-                    document.getElementById("icon-preview").style.display = 'block';
-                    document.getElementById("icon-settings").style.display = "block";
                 }
                 document.getElementById("icon-width").value = icon.options.iconSize[0];
                 document.getElementById("icon-height").value = icon.options.iconSize[1];
                 document.getElementById("icon-width-value").textContent = icon.options.iconSize[0];
                 document.getElementById("icon-height-value").textContent = icon.options.iconSize[1];
             }
-    
+
             updatePreviewSize();
         }
-        
-        function generateMapHTML() {
-            const e = [];
-            map.eachLayer((function(t) {
-                if (t instanceof L.Marker) {
-                    const n = t;
-                    const o = n.options.icon;
-                    const i = o.options.iconUrl;
-                    const r = o.options.iconSize;
-                    const c = n.getLatLng();
-                    const l = n.getPopup() ? n.getPopup().getContent() : "";
-                    const a = n.getTooltip() ? n.getTooltip().getContent() : "";
-                    e.push({
-                        lat: c.lat,
-                        lng: c.lng,
-                        iconUrl: i,
-                        iconWidth: r[0],
-                        iconHeight: r[1],
-                        popupContent: l,
-                        tooltipContent: a
-                    });
-                }
-            }));
-            const t = map.getCenter();
-            const n = map.getZoom();
-            let o = `<div id="map" style="height: 600px; width: 100%;">
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
-<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"><\/script>
-<script>
-    var map = L.map('map').setView([${t.lat}, ${t.lng}], ${n});
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors'
-    }).addTo(map);
-    
-    ${e.map(e => `
-        var icon = L.icon({
-            iconUrl: '${e.iconUrl}',
-            iconSize: [${e.iconWidth}, ${e.iconHeight}],
-            iconAnchor: [${e.iconWidth} / 2, ${e.iconHeight}],
-            popupAnchor: [0, -${e.iconHeight}],
-            tooltipAnchor: [${e.iconWidth} / 2, -${e.iconHeight} / 2]
-        });
-    
-        var marker = L.marker([${e.lat}, ${e.lng}], {
-            icon: icon,
-            zIndexOffset: 1000 
-        }).addTo(map);
-    
-        ${e.popupContent ? `marker.bindPopup('${e.popupContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""}
-        ${e.tooltipContent ? `marker.bindTooltip('${e.tooltipContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""}
-                `).join("\n")}
-<\/script>
-            `;
-            o = o.replace(/iconUrl: 'marker-icon\.png'/g, `iconUrl: '${location.origin}/marker-icon.png'`);
-            document.getElementById("output-html").value = o;
-            const input = document.getElementById('output-html').value;
-            const output = document.getElementById('output-html');
-            output.innerHTML = hljs.highlight('html', input).value;
-            output.classList.add('hljs');
+
+        // マーカーを保存
+        function saveMarker() {
+            if (editingMarker) {
+                const lat = parseFloat(document.getElementById("marker-lat").value);
+                const lng = parseFloat(document.getElementById("marker-lng").value);
+                const popupContent = document.getElementById("marker-popup").value;
+                const tooltipContent = document.getElementById("marker-tooltip").value;
+                const iconUrl = document.getElementById("icon-preview").src;
+
+                applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl);
+                saveCurrentMapToStorage();
+            }
         }
-    
-        function resizeImage(e, t, n, o) {
-            const i = new FileReader();
-            i.onload = function(e) {
-                const i = new Image();
-                i.onload = function() {
-                    const e = document.createElement("canvas");
-                    e.width = t;
-                    e.height = n;
-                    e.getContext("2d").drawImage(i, 0, 0, t, n);
-                    o(e.toDataURL());
-                };
-                i.src = e.target.result;
-            };
-            i.readAsDataURL(e);
+
+        // アイコンを適用してマーカーを保存
+        function applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl) {
+            const iconWidth = parseInt(document.getElementById("icon-width").value);
+            const iconHeight = parseInt(document.getElementById("icon-height").value);
+
+            editingMarker.setLatLng([lat, lng]);
+            if (iconUrl) {
+                const icon = L.icon({
+                    iconUrl: iconUrl,
+                    iconSize: [iconWidth, iconHeight],
+                    iconAnchor: [iconWidth / 2, iconHeight],
+                    popupAnchor: [0, -iconHeight],
+                    tooltipAnchor: [iconWidth / 2, -iconHeight / 2]
+                });
+                editingMarker.setIcon(icon);
+            }
+
+            editingMarker.bindPopup(popupContent);
+            editingMarker.bindTooltip(tooltipContent);
+
+            document.getElementById("marker-editor").style.display = "none";
+            editingMarker = null;
         }
-    
-        document.getElementById("marker-icon-upload").addEventListener("change", function() {
-            const e = this.files[0];
-            const t = document.getElementById("icon-preview");
-            if (e) {
-                resizeImage(e, parseInt(document.getElementById("icon-width").value), parseInt(document.getElementById("icon-height").value), function(imageDataUrl) {
-                    t.src = imageDataUrl;
-                    t.style.display = "block";
+
+        // マーカーを削除
+        function deleteMarker() {
+            if (confirm("削除していいですか？")) {
+                map.removeLayer(editingMarker);
+                document.getElementById("marker-editor").style.display = "none";
+                editingMarker = null;
+                saveCurrentMapToStorage();
+                updateEditNextMarkerButton();
+            }
+        }
+
+        // アイコンをアップロード
+        function handleIconUpload() {
+            const file = this.files[0];
+            const preview = document.getElementById("icon-preview");
+            if (file) {
+                resizeImage(file, parseInt(document.getElementById("icon-width").value), parseInt(document.getElementById("icon-height").value), function(imageDataUrl) {
+                    preview.src = imageDataUrl;
+                    preview.style.display = "block";
                     document.getElementById("icon-settings").style.display = "block";
                     updatePreviewSize();
                 });
             } else {
-                t.style.display = "none";
+                preview.style.display = "none";
                 document.getElementById("icon-settings").style.display = "none";
             }
-        });
-    
-        document.getElementById("load-icon-url").addEventListener("click", function() {
-            const e = document.getElementById("marker-icon-url").value;
-            const t = document.getElementById("icon-preview");
-            if (e) {
-                t.src = e;
-                t.onload = function() {
-                    t.style.display = "block";
+        }
+
+        // URLからアイコンを読み込み
+        function loadIconFromUrl() {
+            const url = document.getElementById("marker-icon-url").value;
+            const preview = document.getElementById("icon-preview");
+            if (url) {
+                preview.src = url;
+                preview.onload = function() {
+                    preview.style.display = "block";
                     document.getElementById("icon-settings").style.display = "block";
                     updatePreviewSize();
                 };
-                t.onerror = function() {
+                preview.onerror = function() {
                     alert("IMAGE LOAD FAILED. CHECK URL.");
-                    t.style.display = "none";
+                    preview.style.display = "none";
                     document.getElementById("icon-settings").style.display = "none";
                 };
             } else {
-                t.style.display = "none";
+                preview.style.display = "none";
                 document.getElementById("icon-settings").style.display = "none";
             }
-        });
-    
-        document.getElementById("icon-width").addEventListener("input", syncWidth);
-        document.getElementById("icon-width-input").addEventListener("input", syncWidth);
-        document.getElementById("icon-height").addEventListener("input", syncHeight);
-        document.getElementById("icon-height-input").addEventListener("input", syncHeight);
-    
+        }
+
+        // 画像をリサイズ
+        function resizeImage(file, width, height, callback) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const img = new Image();
+                img.onload = function() {
+                    const canvas = document.createElement("canvas");
+                    canvas.width = width;
+                    canvas.height = height;
+                    canvas.getContext("2d").drawImage(img, 0, 0, width, height);
+                    callback(canvas.toDataURL());
+                };
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        // 幅の同期
         function syncWidth(event) {
             let value = event.target.value;
             document.getElementById("icon-width").value = value;
             document.getElementById("icon-width-input").value = value;
             updatePreviewSize();
         }
-    
+
+        // 高さの同期
         function syncHeight(event) {
             let value = event.target.value;
             document.getElementById("icon-height").value = value;
             document.getElementById("icon-height-input").value = value;
             updatePreviewSize();
         }
-    
-        const map = L.map("map").setView([33.321797711641395, 130.52061378343208], 16);
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors' }).addTo(map);
-    
-        let editingMarker = null;
-        let hoveredMarker = null;
-    
-        map.on("click", function(e) {
-            if (nextMarkerEdit) {
+
+        // プレビューサイズを更新
+        function updatePreviewSize() {
+            var width = document.getElementById("icon-width").value;
+            var height = document.getElementById("icon-height").value;
+            var preview = document.getElementById("icon-preview");
+            preview.style.width = width + "px";
+            preview.style.height = height + "px";
+            document.getElementById("icon-width-value").textContent = width;
+            document.getElementById("icon-height-value").textContent = height;
+            if (editingMarker) {
+                var iconUrl = preview.src;
+                var icon = L.icon({
+                    iconUrl: iconUrl,
+                    iconSize: [width, height],
+                    iconAnchor: [width / 2, height],
+                    popupAnchor: [0, -height],
+                    tooltipAnchor: [width / 2, -height / 2]
+                });
+                editingMarker.setIcon(icon);
+                saveCurrentMapToStorage();
+            }
+        }
+
+        // マーカーエディタのドラッグ移動を設定
+        function setupEditorDrag() {
+            const editor = document.getElementById("marker-editor");
+            let isDragging = false;
+            let offsetX, offsetY;
+
+            editor.addEventListener("mousedown", function(e) {
+                if (!e.target.closest("input, textarea, button")) {
+                    isDragging = true;
+                    offsetX = e.clientX - editor.getBoundingClientRect().left;
+                    offsetY = e.clientY - editor.getBoundingClientRect().top;
+                }
+            });
+
+            document.addEventListener("mousemove", function(e) {
+                if (isDragging) {
+                    editor.style.left = (e.clientX - offsetX) + "px";
+                    editor.style.top = (e.clientY - offsetY) + "px";
+                }
+            });
+
+            document.addEventListener("mouseup", function() {
+                isDragging = false;
+            });
+        }
+
+        // 現在のマップを保存
+        function saveCurrentMapToStorage() {
+            const mapData = {
+                center: map.getCenter(),
+                zoom: map.getZoom(),
+                markers: []
+            };
+
+            map.eachLayer((layer) => {
+                if (layer instanceof L.Marker) {
+                    const marker = layer;
+                    const icon = marker.options.icon;
+                    const { lat, lng } = marker.getLatLng();
+                    mapData.markers.push({
+                        lat: lat,
+                        lng: lng,
+                        iconUrl: icon.options.iconUrl,
+                        iconSize: icon.options.iconSize,
+                        popupContent: marker.getPopup() ? marker.getPopup().getContent() : '',
+                        tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '',
+                    });
+                }
+            });
+
+            if (currentMapName) {
+                // 既存のマップを更新
+                const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+                savedMaps[currentMapName] = mapData;
+                localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
+            }
+        }
+
+        // マップ保存モーダルを表示
+        function showSaveMapModal() {
+            document.getElementById("save-map-modal").style.display = "block";
+        }
+
+        // マップ保存モーダルを非表示
+        function hideSaveMapModal() {
+            document.getElementById("save-map-modal").style.display = "none";
+        }
+
+        // マップ名を付けて保存
+        function saveCurrentMapWithName() {
+            const mapName = document.getElementById("save-map-name").value.trim();
+            if (!mapName) {
+                alert("マップ名を入力してください");
                 return;
             }
-    
-            if (editingMarker) {
-                const t = e.latlng;
-                editingMarker.setLatLng([t.lat, t.lng]);
-                document.getElementById("marker-lat").value = t.lat;
-                document.getElementById("marker-lng").value = t.lng;
-                updatePreviewSize();
-                saveMapToStorage();
+
+            const mapData = {
+                center: map.getCenter(),
+                zoom: map.getZoom(),
+                markers: []
+            };
+
+            map.eachLayer((layer) => {
+                if (layer instanceof L.Marker) {
+                    const marker = layer;
+                    const icon = marker.options.icon;
+                    const { lat, lng } = marker.getLatLng();
+                    mapData.markers.push({
+                        lat: lat,
+                        lng: lng,
+                        iconUrl: icon.options.iconUrl,
+                        iconSize: icon.options.iconSize,
+                        popupContent: marker.getPopup() ? marker.getPopup().getContent() : '',
+                        tooltipContent: marker.getTooltip() ? marker.getTooltip().getContent() : '',
+                    });
+                }
+            });
+
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            savedMaps[mapName] = mapData;
+            localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
+
+            currentMapName = mapName;
+            document.getElementById("save-map-name").value = "";
+            hideSaveMapModal();
+            alert(`マップ「${mapName}」を保存しました`);
+        }
+
+        // マップギャラリーを表示
+        function showGallery() {
+            const gallery = document.getElementById("gallery-container");
+            const mapList = document.getElementById("gallery-map-list");
+            mapList.innerHTML = "";
+
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            
+            if (Object.keys(savedMaps).length === 0) {
+                mapList.innerHTML = '<div class="text-center py-4">保存されたマップはありません</div>';
             } else {
-                const t = e.latlng;
-                const n = L.marker(t).addTo(map);
-                n.bindPopup("新しいマーカーのポップアップ");
-                n.bindTooltip("新しいマーカーのツールチップ");
-                n.on("mouseover", function() {
-                    hoveredMarker = n;
+                for (const [name, data] of Object.entries(savedMaps)) {
+                    const mapItem = document.createElement("div");
+                    mapItem.className = "gallery-map-item";
+                    
+                    mapItem.innerHTML = `
+                        <div class="gallery-map-title">${name}</div>
+                        <div class="gallery-map-preview">
+                            マーカー数: ${data.markers.length}<br>
+                            中心座標: ${data.center.lat.toFixed(4)}, ${data.center.lng.toFixed(4)}<br>
+                            ズームレベル: ${data.zoom}
+                        </div>
+                        <div class="gallery-map-actions">
+                            <button class="hacker-btn gallery-btn load-map-btn" data-name="${name}">読み込み</button>
+                            <button class="hacker-btn gallery-btn danger delete-map-btn" data-name="${name}">削除</button>
+                        </div>
+                    `;
+                    
+                    mapList.appendChild(mapItem);
+                }
+
+                // イベントリスナーを追加
+                document.querySelectorAll('.load-map-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        loadMapFromGallery(this.dataset.name);
+                    });
                 });
-                n.on("mouseout", function() {
-                    hoveredMarker === n && (hoveredMarker = null);
+
+                document.querySelectorAll('.delete-map-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        if (confirm(`マップ「${this.dataset.name}」を削除しますか？`)) {
+                            deleteMapFromGallery(this.dataset.name);
+                        }
+                    });
                 });
-                document.getElementById("marker-icon-url").value = "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png";
-                openEditor(n);
-                saveMapToStorage();
             }
-        });
-    
-        document.getElementById("save-marker").addEventListener("click", function() {
-            if (editingMarker) {
-                const lat = parseFloat(document.getElementById("marker-lat").value);
-                const lng = parseFloat(document.getElementById("marker-lng").value);
-                const popupContent = document.getElementById("marker-popup").value;
-                const tooltipContent = document.getElementById("marker-tooltip").value;
-    
-                iconUrl = document.getElementById("icon-preview").src;
-    
-                applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl);
+
+            gallery.style.display = "block";
+        }
+
+        // マップギャラリーを非表示
+        function hideGallery() {
+            document.getElementById("gallery-container").style.display = "none";
+        }
+
+        // ギャラリーからマップを読み込み
+        function loadMapFromGallery(mapName) {
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            const mapData = savedMaps[mapName];
+
+            if (!mapData) {
+                alert("マップデータが見つかりません");
+                return;
             }
-        });
-    
-        function applyIconAndSaveMarker(lat, lng, popupContent, tooltipContent, iconUrl) {
-            const iconWidth = parseInt(document.getElementById("icon-width").value);
-            const iconHeight = parseInt(document.getElementById("icon-height").value);
-    
-            editingMarker.setLatLng([lat, lng]);
-            if (iconUrl) {
+
+            // 現在のマップをクリア
+            clearCurrentMap();
+
+            // 新しいマップを読み込み
+            map.setView(mapData.center, mapData.zoom);
+            currentMapName = mapName;
+
+            mapData.markers.forEach((markerData) => {
                 const icon = L.icon({
-                    iconUrl: iconUrl,
-                    iconSize: [iconWidth, iconHeight],
-                    iconAnchor: [iconWidth / 2, iconHeight],
-                    popupAnchor: [0, -iconHeight],
-                    tooltipAnchor: [iconWidth / 2, -iconHeight / 2]
+                    iconUrl: markerData.iconUrl,
+                    iconSize: markerData.iconSize,
+                    iconAnchor: [markerData.iconSize[0] / 2, markerData.iconSize[1]],
+                    popupAnchor: [0, -markerData.iconSize[1]],
+                    tooltipAnchor: [markerData.iconSize[0] / 2, -markerData.iconSize[1] / 2],
                 });
-                editingMarker.setIcon(icon);
-            }
-    
-            editingMarker.bindPopup(popupContent);
-            editingMarker.bindTooltip(tooltipContent);
-    
-            document.getElementById("marker-editor").style.display = "none";
-            editingMarker = null;
-            saveMapToStorage();
+
+                const marker = L.marker([markerData.lat, markerData.lng], { icon: icon }).addTo(map);
+                if (markerData.popupContent) marker.bindPopup(markerData.popupContent);
+                if (markerData.tooltipContent) marker.bindTooltip(markerData.tooltipContent);
+
+                marker.on("mouseover", function() {
+                    hoveredMarker = marker;
+                });
+
+                marker.on("mouseout", function() {
+                    if (hoveredMarker === marker) {
+                        hoveredMarker = null;
+                    }
+                });
+            });
+
+            hideGallery();
+            updateEditNextMarkerButton();
+            alert(`マップ「${mapName}」を読み込みました`);
         }
-    
-        document.addEventListener("keydown", function(e) {
-            if (e.key === "e" && hoveredMarker) {
-                openEditor(hoveredMarker);
+
+        // ギャラリーからマップを削除
+        function deleteMapFromGallery(mapName) {
+            const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
+            delete savedMaps[mapName];
+            localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
+
+            if (currentMapName === mapName) {
+                currentMapName = '';
             }
-        });
-    
-        (function() {
-            const e = document.getElementById("marker-editor");
-            let t, n, o = false;
-            e.addEventListener("mousedown", function(i) {
-                if (!i.target.closest("input, textarea, button")) {
-                    t = i.clientX - e.getBoundingClientRect().left;
-                    n = i.clientY - e.getBoundingClientRect().top;
-                    o = true;
+
+            showGallery(); // ギャラリーを更新
+        }
+
+        // 現在のマップをクリア
+        function clearCurrentMap() {
+            map.eachLayer(layer => {
+                if (layer instanceof L.Marker) {
+                    map.removeLayer(layer);
                 }
             });
-            document.addEventListener("mousemove", function(i) {
-                if (o) {
-                    e.style.left = i.clientX - t + "px";
-                    e.style.top = i.clientY - n + "px";
+            currentMapName = '';
+            updateEditNextMarkerButton();
+        }
+
+        // HTMLを生成
+        function generateMapHTML() {
+            const markers = [];
+            map.eachLayer((layer) => {
+                if (layer instanceof L.Marker) {
+                    const marker = layer;
+                    const icon = marker.options.icon;
+                    const iconUrl = icon.options.iconUrl;
+                    const iconSize = icon.options.iconSize;
+                    const latlng = marker.getLatLng();
+                    const popupContent = marker.getPopup() ? marker.getPopup().getContent() : "";
+                    const tooltipContent = marker.getTooltip() ? marker.getTooltip().getContent() : "";
+                    markers.push({
+                        lat: latlng.lat,
+                        lng: latlng.lng,
+                        iconUrl: iconUrl,
+                        iconWidth: iconSize[0],
+                        iconHeight: iconSize[1],
+                        popupContent: popupContent,
+                        tooltipContent: tooltipContent
+                    });
                 }
             });
-            document.addEventListener("mouseup", function() {
-                o = false;
-            });
-        })();
+
+            const center = map.getCenter();
+            const zoom = map.getZoom();
+            let html = `<div id="map" style="height: 600px; width: 100%;">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"><\/script>
+<script>
+    var map = L.map('map').setView([${center.lat}, ${center.lng}], ${zoom});
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors'
+    }).addTo(map);
+    
+    ${markers.map(marker => `
+        var icon = L.icon({
+            iconUrl: '${marker.iconUrl}',
+            iconSize: [${marker.iconWidth}, ${marker.iconHeight}],
+            iconAnchor: [${marker.iconWidth} / 2, ${marker.iconHeight}],
+            popupAnchor: [0, -${marker.iconHeight}],
+            tooltipAnchor: [${marker.iconWidth} / 2, -${marker.iconHeight} / 2]
+        });
+    
+        var marker = L.marker([${marker.lat}, ${marker.lng}], {
+            icon: icon,
+            zIndexOffset: 1000 
+        }).addTo(map);
     
-        document.getElementById("copyButton").onclick = function() {
+        ${marker.popupContent ? `marker.bindPopup('${marker.popupContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""}
+        ${marker.tooltipContent ? `marker.bindTooltip('${marker.tooltipContent.replace(/'/g, "\\'").replace(/<\/script>/g, "<\\/script>")}');` : ""}
+                `).join("\n")}
+<\/script>
+            `;
+
+            html = html.replace(/iconUrl: 'marker-icon\.png'/g, `iconUrl: '${location.origin}/marker-icon.png'`);
+            document.getElementById("output-html").value = html;
+            const input = document.getElementById('output-html').value;
+            const output = document.getElementById('output-html');
+            output.innerHTML = hljs.highlight('html', input).value;
+            output.classList.add('hljs');
+        }
+
+        // HTMLをクリップボードにコピー
+        function copyHTMLToClipboard() {
             const textToCopy = document.getElementById("output-html").innerText;
             navigator.clipboard.writeText(textToCopy).then(() => {
                 alert("コピーしました。");
             }).catch(err => {
                 console.error('コピーに失敗しました：', err);
             });
-        };
-    
-        document.getElementById("generate-html").addEventListener("click", generateMapHTML);
-    
-        let nextMarkerEdit = false;
-    
-        document.getElementById("edit-next-marker").addEventListener("click", function () {
-            nextMarkerEdit = true;
-            alert("クリックして次のマーカーを編集します。");
-        });
-    
-        map.on('popupopen', function (e) {
+        }
+
+        // ポップアップが開いた時の処理
+        map.on('popupopen', function(e) {
             const marker = e.popup._source;
             if (nextMarkerEdit) {
                 openEditor(marker);
                 nextMarkerEdit = false;
-                alert("マーカーを編集します。");
-            }
-        });
-    
-        document.getElementById("delete-marker").addEventListener("click", function() {
-            if (confirm("削除していいですか？")) {
-                map.removeLayer(editingMarker);
-                editingMarker=false;
-                document.getElementById("marker-editor").style.display = "none";
-                saveMapToStorage();
+                document.getElementById("edit-next-marker").textContent = "次のマーカーを編集";
+                document.getElementById("edit-next-marker").classList.remove("danger");
+                document.getElementById("edit-next-marker").classList.add("secondary");
             }
         });
     </script>