diff --git a/map4.js b/map4.js
index 954ac37..0024fa7 100644
--- a/map4.js
+++ b/map4.js
@@ -1,54 +1,67 @@
-import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+import { createClient } from "https://esm.sh/@supabase/supabase-js";
 
-// Supabase 接続設定（自分のプロジェクトの値を入れてください）
+// ====== 🔥 ここを書き換える場所 🔥 ======
 const SUPABASE_URL = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";
-const SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";
-const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
+const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";
+// ======================================
 
-(() => {
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-  const params = new URLSearchParams(window.location.search);
-  const groupName = params.get("group") || "未設定";
-  const userName = "user-" + Math.floor(Math.random() * 9999);
+(function () {
+  const urlParams = new URLSearchParams(window.location.search);
+  const groupName = urlParams.get("group");
 
-  document.getElementById("groupName").textContent = groupName;
+  document.getElementById("groupNameDisplay").textContent =
+    `グループ名：${groupName}`;
 
-  const map = L.map('map').setView([35.681236, 139.767125], 14);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: "© OpenStreetMap contributors"
+  const map = L.map("map").setView([35.0, 135.0], 5);
+
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 18,
   }).addTo(map);
 
-  async function saveLocation(lat, lng) {
-    await supabase
+  let myMarker = null;
+
+  // --- 現在地取得 ---
+  navigator.geolocation.watchPosition(async (pos) => {
+    const lat = pos.coords.latitude;
+    const lng = pos.coords.longitude;
+
+    if (!myMarker) {
+      myMarker = L.marker([lat, lng], {
+        title: `あなた（${groupName}）`,
+      }).addTo(map);
+      map.setView([lat, lng], 16);
+    } else {
+      myMarker.setLatLng([lat, lng]);
+    }
+
+    // --- Supabase に保存 ---
+    await supabase.from("locations").insert({
+      group_name: groupName,
+      lat,
+      lng,
+    });
+
+  });
+
+  // --- 他メンバーの現在地を表示 ---
+  setInterval(async () => {
+    const { data } = await supabase
       .from("locations")
-      .insert({
-        group_name: groupName,
-        user_name: userName,
-        lat: lat,
-        lng: lng
-      });
-  }
+      .select("*")
+      .eq("group_name", groupName)
+      .order("updated_at", { ascending: false })
+      .limit(20);
 
-  function moveToCurrentLocation() {
-    navigator.geolocation.getCurrentPosition(
-      async pos => {
-        const lat = pos.coords.latitude;
-        const lng = pos.coords.longitude;
-
-        map.flyTo([lat, lng], 17, { duration: 1.6 });
-
-        L.marker([lat, lng])
-          .addTo(map)
-          .bindPopup(`あなたの現在地<br>グループ：<b>${groupName}</b>`)
-          .openPopup();
-
-        // ← SUPABASE に保存
-        await saveLocation(lat, lng);
-      },
-      err => alert("位置情報エラー：" + err.message)
-    );
-  }
-
-  moveToCurrentLocation();
+    data.forEach((row) => {
+      L.circleMarker([row.lat, row.lng], {
+        radius: 6,
+        color: "#0984e3",
+        fillColor: "#74b9ff",
+        fillOpacity: 0.9,
+      }).addTo(map);
+    });
+  }, 5000);
 
 })();