From 7e5b3ed21024d8fd3e92b18defd038b855fa3c8d Mon Sep 17 00:00:00 2001
From: Mr-T18 <itsuki.tkhs@gmail.com>
Date: Thu, 28 Aug 2025 02:31:55 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E7=B7=AF=E5=BA=A6=E7=B5=8C=E5=BA=A6?=
 =?UTF-8?q?=E3=81=AB=E3=82=88=E3=81=A3=E3=81=A6=E3=83=94=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=97=E3=81=9F=E3=81=84(=E3=81=BE?=
 =?UTF-8?q?=E3=81=A0=E3=81=A7=E3=81=8D=E3=81=A6=E3=81=AA=E3=81=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/javascript/controllers/map_controller.js | 2 +-
 app/views/photo_spots/index.html.erb         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
index 02dacd4..c5ddf39 100644
--- a/app/javascript/controllers/map_controller.js
+++ b/app/javascript/controllers/map_controller.js
@@ -20,7 +20,7 @@ export default class extends Controller {
 
     // 既存のスポットのマーカーを設置
     const photo_spotIcon = L.icon({
-      iconUrl: '/photo_spot.svg',
+      iconUrl: '/onsen.svg',
       iconSize: [32, 32],
       iconAnchor: [16, 32],
     });
diff --git a/app/views/photo_spots/index.html.erb b/app/views/photo_spots/index.html.erb
index e8ed65a..e2101ad 100644
--- a/app/views/photo_spots/index.html.erb
+++ b/app/views/photo_spots/index.html.erb
@@ -9,7 +9,7 @@
   <div class="grid lg:grid-cols-2 gap-6 min-h-[600px]">
     <div class="order-2 lg:order-1">
       <div class="relative h-96 lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
-        <div data-controller="map" data-map-target="container" data-map-photo_spots="<%= h @photo_spots.to_json(only: [:id, :name, :geo_lat, :geo_lng]) %>" style="width: 100%; height: 100%;"></div>
+        <div data-controller="map" data-map-target="container" data-map-photo_spots="<%= h @photo_spots.to_json(only: [:id, :name, :latitude, :longitude]) %>" style="width: 100%; height: 100%;"></div>
         <button type="button"
                 class="absolute top-3 right-3 bg-white border rounded-lg px-4 py-2 text-sm shadow-lg hover:bg-blue-50 z-10 focus:ring-2 focus:ring-blue-500"
                 data-action="click->map#locate">

From 18e4906d7e168b7c1f6fe1e0af72752ade3d7d55 Mon Sep 17 00:00:00 2001
From: Mr-T18 <itsuki.tkhs@gmail.com>
Date: Thu, 28 Aug 2025 06:11:58 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=94=E3=83=B3=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E3=81=A8=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/images/onsen.svg                   |  75 +++++++++++++
 .../controllers/form_map_controller.js        |  90 +++++++++++++++
 .../controllers/index_map_controller.js       |  99 +++++++++++++++++
 app/javascript/controllers/map_controller.js  | 103 ------------------
 app/views/admin/photo_spots/_form.html.erb    |  42 +++----
 app/views/photo_spots/_spot_card.html.erb     |   8 +-
 app/views/photo_spots/index.html.erb          |  14 ++-
 7 files changed, 300 insertions(+), 131 deletions(-)
 create mode 100644 app/assets/images/onsen.svg
 create mode 100644 app/javascript/controllers/form_map_controller.js
 create mode 100644 app/javascript/controllers/index_map_controller.js
 delete mode 100644 app/javascript/controllers/map_controller.js

diff --git a/app/assets/images/onsen.svg b/app/assets/images/onsen.svg
new file mode 100644
index 0000000..4e68ede
--- /dev/null
+++ b/app/assets/images/onsen.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2" viewBox="0 0 600 600" version="1.1"
+   inkscape:version="0.91 r13725" sodipodi:docname="OnsenMark-red.svg" width="600" height="600">
+   <defs id="defs18529" />
+   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10"
+      gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2"
+      inkscape:window-width="1916" inkscape:window-height="1035" id="namedview18527" showgrid="false"
+      inkscape:zoom="1.2405942" inkscape:cx="222.34469" inkscape:cy="265.819" inkscape:window-x="4"
+      inkscape:window-y="1" inkscape:window-maximized="1" inkscape:current-layer="g3018" fit-margin-top="0"
+      fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" />
+   <title id="title3083">Onsen Mark 02</title>
+   <circle cx="300" cy="300" r="290" fill="white" fill-opacity="0.8" stroke="#ddd" stroke-width="2" />
+   <g id="layer1" transform="translate(680.56796,-510.53901)" style="fill:#ff0000">
+      <g id="g3018" style="fill:#ff0000">
+         <g id="g19071" transform="translate(10,-4)">
+            <path sodipodi:nodetypes="cccccsccsccccsscsscscccc" inkscape:connector-curvature="0"
+               d="m -199.96672,816.38471 c -5.0719,0.74907 -6.29077,11.92741 -1.6875,15.47624 5.3511,4.442 9.3329,9.02802 11.75,13.18542 10.29127,21.39672 26.60917,42.09673 4.60091,65.07981 -30.8826,23.08839 -37.25747,21.79717 -55.93147,28.623 -37.347,13.65004 -89.406,22.19618 -146.91,22.19618 -57.5,0 -111.17213,0.32058 -148.52213,-13.32946 -52.79136,-30.82871 -59.71911,-29.98577 -58.65155,-92.18416 0,-2.94341 0.80876,-6.23008 3.2188,-10.38537 2.41004,-4.15528 6.3724,-8.74586 11.719,-13.18542 4.81715,-3.92487 2.9442,-15.77758 -2.4375,-15.42541 -0.41245,0.0195 -0.82183,0.1221 -1.2188,0.30545 -21.098,9.84761 -38.218,21.27738 -50.437,34.41426 -12.219,13.1364 -20.094,28.74345 -20.094,46.83598 0,19.34041 8.9118,35.75337 22.688,49.53374 13.776,13.78053 33.087,25.66123 56.781,35.68653 47.389,20.0524 112.34,32.3275 184.09,32.3275 71.754,0 136.7,-12.2742 184.09,-32.3275 23.694,-10.02644 43.006,-21.90616 56.781,-35.68653 13.776,-13.78053 22.688,-30.19333 22.688,-49.53374 0,-18.09742 -7.9002,-33.70072 -20.125,-46.83598 -12.225,-13.13492 -29.332,-24.56649 -50.438,-34.41426 -0.63511,-0.33148 -1.30451,-0.45264 -1.9688,-0.35636 z"
+               style="color:#000000;text-indent:0;text-transform:none;block-progression:tb;fill:#ff0000"
+               id="path3601" />
+            <g style="fill:#ff0000" transform="translate(0.78442,0)" id="g3013">
+               <path inkscape:connector-curvature="0"
+                  d="m -487.56,581.72 a 7.9059,7.9059 0 0 0 -0.75,0.0625 c -6.2183,1.029 -9.8246,5.9004 -11.625,9.0312 -1.8004,3.1309 -3.0704,5.3842 -3.125,5.4375 a 7.9059,7.9059 0 0 0 -1.2812,1.6562 c -13.503,22.911 -29.995,48.465 -30.688,78.875 a 7.9059,7.9059 0 0 0 0.0625,1.0625 c 2.8019,24.76 17.512,46.36 32.781,62.281 a 7.9059,7.9059 0 0 0 0.0313,0 c 16.116,16.785 26.804,34.858 21.219,54.938 a 7.9059,7.9059 0 0 0 -0.125,0.5625 c -3.8495,18.928 -10.959,37.502 -18.188,56.219 a 7.9059,7.9059 0 0 0 -0.3125,4.6562 c 1.0518,4.4319 4.0373,9.3865 9.2188,10.656 5.1815,1.2698 8.905,-1.0174 11.531,-3 4.9022,-3.7008 8.1035,-8.2427 10.062,-13.25 13.408,-22.747 29.605,-48.086 30.281,-78.219 a 7.9059,7.9059 0 0 0 -0.0625,-1.0938 c -2.85,-24.59 -17.29,-46.24 -32.47,-62.22 -0.005,-0.005 0.005,-0.0258 0,-0.0313 l 0.0313,0 c -7.688,-8.1448 -14.54,-16.636 -18.656,-25.219 -4.1166,-8.5826 -5.6812,-16.95 -3.2812,-26.469 a 7.9059,7.9059 0 0 0 0.16,-0.66 c 3.2797,-20.042 11.079,-39.706 18.469,-59.812 a 7.9059,7.9059 0 0 0 0.5,-2.7188 c -0.008,-7.6695 -6.4772,-13.235 -13.781,-12.75 z"
+                  style="color:#000000;text-indent:0;text-transform:none;block-progression:tb;fill:#ff0000"
+                  id="path3006" />
+               <path inkscape:connector-curvature="0"
+                  d="m -279.89,580.21 a 7.9059,7.9059 0 0 0 -0.75,0.0625 c -6.2183,1.029 -9.8246,5.9004 -11.625,9.0312 -1.8004,3.1309 -3.0704,5.3842 -3.125,5.4375 a 7.9059,7.9059 0 0 0 -1.2812,1.6562 c -13.503,22.911 -29.995,48.465 -30.688,78.875 a 7.9059,7.9059 0 0 0 0.0625,1.0625 c 2.8019,24.76 17.512,46.36 32.781,62.281 a 7.9059,7.9059 0 0 0 0.0313,0 c 16.116,16.785 26.804,34.858 21.219,54.938 a 7.9059,7.9059 0 0 0 -0.125,0.5625 c -3.8495,18.928 -10.959,37.502 -18.188,56.219 a 7.9059,7.9059 0 0 0 -0.3125,4.6562 c 1.0518,4.4319 4.0373,9.3865 9.2188,10.656 5.1815,1.2698 8.905,-1.0174 11.531,-3 4.9022,-3.7008 8.1035,-8.2427 10.062,-13.25 13.408,-22.747 29.605,-48.086 30.281,-78.219 a 7.9059,7.9059 0 0 0 -0.0625,-1.0938 c -2.8445,-24.587 -17.289,-46.232 -32.469,-62.219 -0.005,-0.005 0.005,-0.0258 0,-0.0313 l 0.0313,0 c -7.688,-8.1448 -14.54,-16.636 -18.656,-25.219 -4.1166,-8.5826 -5.6812,-16.95 -3.2812,-26.469 a 7.9059,7.9059 0 0 0 0.1562,-0.6562 c 3.2797,-20.042 11.079,-39.706 18.469,-59.812 a 7.9059,7.9059 0 0 0 0.5,-2.7188 c -0.008,-7.6695 -6.4772,-13.235 -13.781,-12.75 z"
+                  style="color:#000000;text-indent:0;text-transform:none;block-progression:tb;fill:#ff0000"
+                  id="path3009" />
+               <path inkscape:connector-curvature="0"
+                  d="m -383.86,531.89 a 9.201,9.201 0 0 0 -0.87285,0.0727 c -7.2369,1.1976 -11.434,6.8669 -13.529,10.511 -2.0953,3.6438 -3.5734,6.2662 -3.6369,6.3282 a 9.201,9.201 0 0 0 -1.4911,1.9276 c -15.714,26.664 -34.908,56.404 -35.714,91.795 a 9.201,9.201 0 0 0 0.0727,1.2365 c 3.2608,28.815 20.38,53.954 38.151,72.483 a 9.201,9.201 0 0 0 0.0364,0 c 18.756,19.534 31.195,40.569 24.695,63.937 a 9.201,9.201 0 0 0 -0.14548,0.65464 c -4.48,22.029 -12.754,43.645 -21.167,65.428 a 9.201,9.201 0 0 0 -0.36369,5.419 c 1.2242,5.1578 4.6986,10.924 10.729,12.402 6.0302,1.4778 10.364,-1.1841 13.42,-3.4914 5.7052,-4.307 9.4309,-9.5929 11.711,-15.42 15.604,-26.473 34.455,-55.963 35.242,-91.031 a 9.201,9.201 0 0 0 -0.0727,-1.2729 c -3.3105,-28.615 -20.121,-53.805 -37.787,-72.411 -0.006,-0.006 0.006,-0.03 0,-0.0364 l 0.0364,0 c -8.9473,-9.4789 -16.921,-19.361 -21.712,-29.35 -4.7909,-9.9885 -6.6118,-19.727 -3.8187,-30.804 a 9.201,9.201 0 0 0 0.18179,-0.76369 c 3.8169,-23.325 12.894,-46.21 21.494,-69.61 a 9.201,9.201 0 0 0 0.5819,-3.1641 c -0.009,-8.9258 -7.5382,-15.403 -16.039,-14.839 z"
+                  style="color:#000000;text-indent:0;text-transform:none;block-progression:tb;fill:#ff0000"
+                  id="path3011" />
+            </g>
+         </g>
+      </g>
+   </g>
+   <metadata id="metadata18525">
+      <rdf:RDF>
+         <cc:Work>
+            <dc:format>image/svg+xml</dc:format>
+            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+            <cc:license rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+            <dc:publisher>
+               <cc:Agent rdf:about="http://openclipart.org/">
+                  <dc:title>Openclipart</dc:title>
+               </cc:Agent>
+            </dc:publisher>
+            <dc:title>Onsen</dc:title>
+            <dc:date>2013-10-23T08:26:49</dc:date>
+            <dc:description>Hot spring mark commonly used in Japan.</dc:description>
+            <dc:source>https://openclipart.org/detail/185361/onsen-by-uroesch-185361</dc:source>
+            <dc:creator>
+               <cc:Agent>
+                  <dc:title>uroesch</dc:title>
+               </cc:Agent>
+            </dc:creator>
+            <dc:subject>
+               <rdf:Bag>
+                  <rdf:li>Hot Spring</rdf:li>
+                  <rdf:li>Japan</rdf:li>
+                  <rdf:li>Onsen</rdf:li>
+               </rdf:Bag>
+            </dc:subject>
+         </cc:Work>
+         <cc:License rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+            <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
+            <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
+            <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+         </cc:License>
+      </rdf:RDF>
+   </metadata>
+</svg>
diff --git a/app/javascript/controllers/form_map_controller.js b/app/javascript/controllers/form_map_controller.js
new file mode 100644
index 0000000..361dfc3
--- /dev/null
+++ b/app/javascript/controllers/form_map_controller.js
@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus"
+import L from "leaflet"
+
+// Connects to data-controller="form-map"
+export default class extends Controller {
+  static targets = ["container", "latitudeInput", "longitudeInput"]
+
+  connect() {
+    this.currentMarker = null;
+
+    // 地図の初期化
+    this.map = L.map(this.containerTarget).setView([35.468, 133.0483], 11.5);
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(this.map);
+
+    // フォームに初期値があればピンを立てる
+    if (this.hasLatitudeInputTarget && this.hasLongitudeInputTarget && this.latitudeInputTarget.value && this.longitudeInputTarget.value) {
+      this.updateMarkerAndInputs(this.latitudeInputTarget.value, this.longitudeInputTarget.value);
+    }
+
+    // マップクリック時のイベントリスナー
+    this.map.on("click", (e) => {
+      const { lat, lng } = e.latlng;
+      this.updateMarkerAndInputs(lat, lng);
+    });
+  }
+
+  // マーカーを更新し、フォームの値を自動入力
+  updateMarkerAndInputs(lat, lng) {
+    this.removeMarker(); // 既存のピンを削除
+
+    const latlng = [lat, lng];
+    this.currentMarker = L.marker(latlng).addTo(this.map)
+      .bindPopup(`緯度: ${lat.toFixed(5)}<br>経度: ${lng.toFixed(5)}`)
+      .openPopup();
+
+    this.map.setView(latlng, this.map.getZoom());
+    this.latitudeInputTarget.value = lat.toFixed(5);
+    this.longitudeInputTarget.value = lng.toFixed(5);
+  }
+
+  // 既存のピンを削除する
+  removeMarker() {
+    if (this.currentMarker) {
+      this.map.removeLayer(this.currentMarker);
+    }
+  }
+
+  // フォームの入力値からマーカーを更新
+  updateMarkerFromInput() {
+    const lat = parseFloat(this.latitudeInputTarget.value);
+    const lng = parseFloat(this.longitudeInputTarget.value);
+
+    // 有効な数値であることを確認
+    if (!isNaN(lat) && !isNaN(lng)) {
+      this.updateMarkerAndInputs(lat, lng);
+    }
+  }
+
+  /**
+   * 現在地を取得し、地図とフォームを更新する
+   */
+  locate() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const lat = position.coords.latitude;
+          const lng = position.coords.longitude;
+          this.updateMarkerAndInputs(lat, lng);
+        },
+        (error) => {
+          console.error("現在地の取得に失敗しました: ", error);
+          alert("現在地の取得に失敗しました。ブラウザの設定をご確認ください。");
+        }
+      );
+    } else {
+      alert("お使いのブラウザは現在地の取得に対応していません。");
+    }
+  }
+
+  // 切断時の処理
+  disconnect() {
+    if (this.map) {
+      this.map.remove();
+      this.map = null;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/controllers/index_map_controller.js b/app/javascript/controllers/index_map_controller.js
new file mode 100644
index 0000000..e425f71
--- /dev/null
+++ b/app/javascript/controllers/index_map_controller.js
@@ -0,0 +1,99 @@
+import { Controller } from "@hotwired/stimulus"
+import L from "leaflet"
+
+// Connects to data-controller="index-map"
+export default class extends Controller {
+  static targets = ["container"]
+  static values = { photoSpots: Array }
+
+  connect() {
+    console.log(this.photoSpotsValue)
+
+    // 地図の初期化
+    this.map = L.map(this.containerTarget).setView([35.474, 133.050], 13)
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(this.map)
+
+    // フォトスポットのマーカー
+    this.photoSpotsValue.forEach(photo_spot => {
+      if (photo_spot.latitude && photo_spot.longitude) {
+        const marker = L.marker([photo_spot.latitude, photo_spot.longitude])
+          .addTo(this.map)
+          .bindPopup(photo_spot.name)
+
+        // マーカークリック時に対応カードをハイライト
+        marker.on("click", () => {
+          this.highlight(null, photo_spot.id)
+        })
+      }
+    })
+
+    // イベントリスナーを登録
+    this.map.on("locationfound", this._onLocationFound.bind(this))
+    this.map.on("locationerror", this._onLocationError.bind(this))
+
+    // 初回ロード時にも現在地を取得
+    this.locate()
+  }
+
+  locate() {
+    if (navigator.geolocation) {
+      this.map.locate({ setView: true, maxZoom: 16 })
+    } else {
+      alert("お使いのブラウザは現在地の取得に対応していません。")
+    }
+  }
+
+  _onLocationFound(e) {
+    const redIcon = new L.Icon({
+      iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
+      shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41]
+    })
+
+    L.marker(e.latlng, { icon: redIcon })
+      .addTo(this.map)
+      .bindPopup("現在地")
+      .openPopup()
+  }
+
+  _onLocationError(e) {
+    alert("現在地を取得できませんでした: " + e.message)
+  }
+
+  highlight(event, spotId = null) {
+    // イベントから spotId を取得
+    const targetSpotId = spotId || event?.currentTarget.dataset.spotId
+    console.log("ハイライト対象ID:", targetSpotId)
+
+    // 既存ハイライトを削除
+    document.querySelectorAll("[data-spot-id]").forEach(el => {
+      el.classList.remove("ring-2", "ring-blue-500", "bg-blue-50", "animate-pulse")
+    })
+
+    // 対象カードを取得
+    const card = document.querySelector(`[data-spot-id='${targetSpotId}']`)
+    console.log("見つかったカード:", card)
+
+    if (card) {
+      card.classList.add("ring-2", "ring-blue-500", "bg-blue-50", "animate-pulse")
+      card.scrollIntoView({ behavior: "smooth", block: "center" })
+      setTimeout(() => card.classList.remove("animate-pulse"), 2000)
+    }
+  }
+
+
+  disconnect() {
+    if (this.map) {
+      this.map.off("locationfound")
+      this.map.off("locationerror")
+      this.map.remove()
+      this.map = null
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
deleted file mode 100644
index c5ddf39..0000000
--- a/app/javascript/controllers/map_controller.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import L from "leaflet"
-
-// Connects to data-controller="map"
-export default class extends Controller {
-  // ターゲット名を変更しました
-  static targets = ["container", "latitudeInput", "longitudeInput"]
-  static values = { photo_spots: Array }
-
-  connect() {
-    this.currentMarker = null;
-    this.photo_spots = this._parsePhotoSpotsData();
-
-    // 地図の初期化
-    this.map = L.map(this.containerTarget).setView([35.468, 133.0483], 11.5);
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 19,
-      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }).addTo(this.map);
-
-    // 既存のスポットのマーカーを設置
-    const photo_spotIcon = L.icon({
-      iconUrl: '/onsen.svg',
-      iconSize: [32, 32],
-      iconAnchor: [16, 32],
-    });
-    this.photo_spots.forEach(photo_spot => {
-      // プロパティ名を変更しました
-      L.marker([photo_spot.latitude, photo_spot.longitude], { icon: photo_spotIcon })
-        .addTo(this.map)
-        .bindPopup(photo_spot.name);
-    });
-
-    // フォームに初期値があればピンを立てる
-    if (this.latitudeInputTarget.value && this.longitudeInputTarget.value) {
-      this.updateMarker(this.latitudeInputTarget.value, this.longitudeInputTarget.value);
-    }
-
-    // マップクリック時のイベントリスナー
-    this.map.on("click", (e) => {
-      const { lat, lng } = e.latlng;
-      this.updateMarker(lat, lng);
-      // テキストボックスの値を更新
-      this.latitudeInputTarget.value = lat.toFixed(5);
-      this.longitudeInputTarget.value = lng.toFixed(5);
-    });
-  }
-
-  // マーカーを更新し、マップの中心を移動する
-  updateMarker(lat, lng) {
-    if (this.currentMarker) {
-      this.map.removeLayer(this.currentMarker);
-    }
-    const latlng = [lat, lng];
-    this.currentMarker = L.marker(latlng).addTo(this.map);
-    this.map.setView(latlng, this.map.getZoom());
-  }
-
-  // フォームの入力値からマーカーを更新する
-  updateMarkerFromInput() {
-    const lat = parseFloat(this.latitudeInputTarget.value);
-    const lng = parseFloat(this.longitudeInputTarget.value);
-
-    if (!isNaN(lat) && !isNaN(lng)) {
-      this.updateMarker(lat, lng);
-    }
-  }
-
-  // 現在地を取得するメソッドを追加
-  locate() {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          const lat = position.coords.latitude;
-          const lng = position.coords.longitude;
-          this.updateMarker(lat, lng);
-          this.latitudeInputTarget.value = lat.toFixed(5);
-          this.longitudeInputTarget.value = lng.toFixed(5);
-        },
-        (error) => {
-          console.error("現在地の取得に失敗しました: ", error);
-          alert("現在地の取得に失敗しました。ブラウザの設定をご確認ください。");
-        }
-      );
-    } else {
-      alert("お使いのブラウザは現在地の取得に対応していません。");
-    }
-  }
-
-  // === プライベートメソッド（内部処理用） ===
-
-  _parsePhotoSpotsData() {
-    try {
-      const rawData = this.element.dataset.mapPhotoSpots || "[]";
-      // パース後のデータが{id:..., name:..., geo_lat:..., geo_lng:...}のような構造であれば
-      // 必要に応じてキーをリマップする必要があります
-      return JSON.parse(rawData);
-    } catch (error) {
-      console.warn("写真スポットデータのパースに失敗:", error);
-      return [];
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/views/admin/photo_spots/_form.html.erb b/app/views/admin/photo_spots/_form.html.erb
index 519913e..6e88ece 100644
--- a/app/views/admin/photo_spots/_form.html.erb
+++ b/app/views/admin/photo_spots/_form.html.erb
@@ -19,30 +19,32 @@
       <%= form.text_field :address, class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
     </div>
   </div>
-  <%# 緯度・経度の入力フィールド %>
-  <div class="flex flex-col sm:flex-row gap-4">
-    <div class="flex-1">
-      <%= form.label :latitude, '緯度', class: 'block font-semibold mb-1' %>
-      <%= form.text_field :latitude,
-                          data: { map_target: 'latitudeInput', action: 'input->map#updateMarkerFromInput' },
-                          class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
+  <%# 地図エリア（デスクトップ時） %>
+  <div data-controller="form-map">
+    <div class="relative h-96 lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
+      <div data-form-map-target="container" style="width: 100%; height: 100%;"></div>
+      <button type="button"
+            class="absolute top-3 right-3 bg-white border rounded-lg px-4 py-2 text-sm shadow-lg hover:bg-blue-50 z-10 focus:ring-2 focus:ring-blue-500"
+            data-action="click->form-map#locate">
+        📍 現在地
+      </button>
     </div>
-    <div class="flex-1">
-      <%= form.label :longitude, '経度', class: 'block font-semibold mb-1' %>
-      <%= form.text_field :longitude,
-                          data: { map_target: 'longitudeInput', action: 'input->map#updateMarkerFromInput' },
+    <%# 緯度・経度の入力フィールドを地図コントローラーのスコープ内に配置 %>
+    <div class="flex flex-col sm:flex-row gap-4 mt-6">
+      <div class="flex-1">
+        <%= form.label :latitude, '緯度', class: 'block font-semibold mb-1' %>
+        <%= form.text_field :latitude,
+                          data: { form_map_target: 'latitudeInput', action: 'input->form-map#updateMarkerFromInput' },
                           class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
+      </div>
+      <div class="flex-1">
+        <%= form.label :longitude, '経度', class: 'block font-semibold mb-1' %>
+        <%= form.text_field :longitude,
+                          data: { form_map_target: 'longitudeInput', action: 'input->form-map#updateMarkerFromInput' },
+                          class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
+      </div>
     </div>
   </div>
-  <%# 地図エリア（デスクトップ時） %>
-  <div class="relative h-96 lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
-    <div data-map-target="container" style="width: 100%; height: 100%;"></div>
-    <button type="button"
-                class="absolute top-3 right-3 bg-white border rounded-lg px-4 py-2 text-sm shadow-lg hover:bg-blue-50 z-10 focus:ring-2 focus:ring-blue-500"
-                data-action="click->map#locate">
-      📍 <%= t('views.photo_spots.index.current_location') %>
-    </button>
-  </div>
   <div>
     <%= form.label :detail, '説明', class: 'block font-semibold mb-1' %>
     <%= form.text_area :detail, rows: 4, class: "block shadow-sm rounded-md border px-3 py-2 w-full border-gray-300 focus:outline-blue-600" %>
diff --git a/app/views/photo_spots/_spot_card.html.erb b/app/views/photo_spots/_spot_card.html.erb
index fc339a8..f0b426a 100644
--- a/app/views/photo_spots/_spot_card.html.erb
+++ b/app/views/photo_spots/_spot_card.html.erb
@@ -1,5 +1,7 @@
-<%# フォトスポットスポットカード（Atomic Design: Molecule） %>
-<%= link_to photo_spot_path(photo_spot), class: "block bg-white rounded-lg shadow-md hover:shadow-lg p-4 hover:bg-blue-50 transition-all duration-200 cursor-pointer border border-gray-100 focus:outline focus:ring-2 focus:ring-blue-400", 'aria-label': "#{photo_spot.name}の詳細" do %>
+<%= link_to photo_spot_path(photo_spot),
+            class: "block bg-white rounded-lg shadow-md hover:shadow-lg p-4 hover:bg-blue-50 transition-all duration-200 border border-gray-100 focus:outline focus:ring-2 focus:ring-blue-400",
+            'aria-label': "#{photo_spot.name}の詳細",
+            data: { spot_id: photo_spot.id } do %>
   <div class="flex items-start gap-4">
     <% if photo_spot.images.attached? %>
       <%= image_tag photo_spot.images.first, class: "w-20 h-20 object-cover rounded-lg flex-shrink-0", alt: photo_spot.name %>
@@ -11,7 +13,7 @@
       <div class="text-sm text-gray-600 mb-2 line-clamp-2"><%= truncate(photo_spot.detail, length: 60) %></div>
       <% if photo_spot.tags.present? %>
         <div class="text-xs text-gray-500 mb-2">
-          <span class="font-medium">タグ:</span> <%= photo_spot.tags%>
+          <span class="font-medium">タグ:</span> <%= photo_spot.tags %>
         </div>
       <% end %>
       <div class="flex items-center">
diff --git a/app/views/photo_spots/index.html.erb b/app/views/photo_spots/index.html.erb
index e2101ad..5b614b4 100644
--- a/app/views/photo_spots/index.html.erb
+++ b/app/views/photo_spots/index.html.erb
@@ -7,17 +7,20 @@
   <%= render 'search_form' %>
   <%# メインコンテンツ：地図 + フォトスポット一覧 %>
   <div class="grid lg:grid-cols-2 gap-6 min-h-[600px]">
+    <%# 左側：地図 %>
     <div class="order-2 lg:order-1">
-      <div class="relative h-96 lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
-        <div data-controller="map" data-map-target="container" data-map-photo_spots="<%= h @photo_spots.to_json(only: [:id, :name, :latitude, :longitude]) %>" style="width: 100%; height: 100%;"></div>
+      <div data-controller="index-map"
+           data-index-map-photo-spots-value="<%= h @photo_spots.to_json(only: [:id, :name, :latitude, :longitude]) %>"
+           class="relative h-96 lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
+        <div data-index-map-target="container" style="width: 100%; height: 100%;"></div>
         <button type="button"
-                class="absolute top-3 right-3 bg-white border rounded-lg px-4 py-2 text-sm shadow-lg hover:bg-blue-50 z-10 focus:ring-2 focus:ring-blue-500"
-                data-action="click->map#locate">
+                class="absolute top-3 right-3 bg-white border rounded-lg px-4 py-2 text-sm shadow-lg hover:bg-blue-50 z-50 focus:ring-2 focus:ring-blue-500"
+                data-action="click->index-map#locate">
           📍 <%= t('views.photo_spots.index.current_location') %>
         </button>
       </div>
     </div>
-    <%# フォトスポット一覧エリア（右側・デスクトップ時） %>
+    <%# 右側：フォトスポット一覧 %>
     <div class="order-1 lg:order-2">
       <div class="space-y-4 lg:max-h-[600px] lg:overflow-y-auto lg:pr-2">
         <% if @photo_spots.any? %>
@@ -36,3 +39,4 @@
       </div>
     </div>
   </div>
+</div>
\ No newline at end of file