// 地図の初期化 const map = L.map('map').setView([38.9122, 139.8360], 13); // 国土地理院の地図タイルレイヤーを追加 L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 18, minZoom: 5 }).addTo(map); // 地図をクリックしてマーカーと情報ウィンドウを追加 map.on('click', (e) => { const { lat, lng } = e.latlng; addMarker(lat, lng); }); // マーカーとコメント入力ウィンドウを追加 function addMarker(lat, lng) { // マーカーの作成 const marker = L.marker([lat, lng]).addTo(map); // ポップアップ(情報ウィンドウ)を作成 const popupContent = ` <div class="info-window"> <p>活動日記を入力してください:</p> <textarea id="comment" rows="3" style="width:100%;"></textarea> <button onclick="saveComment('${lat}', '${lng}')">保存</button> </div> `; marker.bindPopup(popupContent).openPopup(); } // コメントを保存し、右側の履歴に追加 function saveComment(lat, lng) { const comment = document.getElementById("comment").value; const timestamp = new Date().toLocaleString(); // 現在日時を取得 // コメント履歴に追加するHTML要素を作成 const commentEntry = ` <div class="history-entry"> <p><strong>日時:</strong> ${timestamp}</p> <p><strong>場所:</strong> 緯度 ${lat}, 経度 ${lng}</p> <p><strong>活動日記:</strong> ${comment}</p> </div> `; document.getElementById("comments-list").innerHTML += commentEntry; }