diff --git a/map4.js b/map4.js
index 0024fa7..9903cc3 100644
--- a/map4.js
+++ b/map4.js
@@ -1,67 +1,94 @@
+//--------------------------------------------
+// ① Supabase 設定（ここに自分の情報を入れる）
+//--------------------------------------------
+const supabaseUrl = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";          // 例: https://abcxyz.supabase.co
+const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";       // 例: eyJhbGciOiJI...
 import { createClient } from "https://esm.sh/@supabase/supabase-js";
 
-// ====== 🔥 ここを書き換える場所 🔥 ======
-const SUPABASE_URL = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";
-const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";
-// ======================================
+const supabase = createClient(supabaseUrl, supabaseKey);
 
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+//--------------------------------------------
+// ② Leaflet 読み込み
+//--------------------------------------------
+import L from "https://esm.sh/leaflet";
 
-(function () {
-  const urlParams = new URLSearchParams(window.location.search);
-  const groupName = urlParams.get("group");
+//--------------------------------------------
+// ③ メイン処理（即時実行）
+//--------------------------------------------
+(async function () {
+    const params = new URLSearchParams(location.search);
+    const GROUP = params.get("group");
 
-  document.getElementById("groupNameDisplay").textContent =
-    `グループ名：${groupName}`;
+    document.getElementById("groupName").textContent = GROUP;
 
-  const map = L.map("map").setView([35.0, 135.0], 5);
+    // 地図準備
+    const map = L.map("map").setView([35.0, 135.0], 15);
 
-  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    maxZoom: 18,
-  }).addTo(map);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: "© OpenStreetMap contributors"
+    }).addTo(map);
 
-  let myMarker = null;
+    let userMarker = null;
+    let otherMarkers = [];
 
-  // --- 現在地取得 ---
-  navigator.geolocation.watchPosition(async (pos) => {
-    const lat = pos.coords.latitude;
-    const lng = pos.coords.longitude;
+    //--------------------------------------------
+    // ④ 自分の位置を取得
+    //--------------------------------------------
+    navigator.geolocation.getCurrentPosition(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]);
+        // 自分の位置マーカー
+        userMarker = L.marker([lat, lng], { title: "自分" })
+            .addTo(map)
+            .bindPopup(`自分（グループ: ${GROUP}）`)
+            .openPopup();
+
+        // 自動で自分の位置へ移動
+        map.setView([lat, lng], 15);
+
+        // Supabase に保存
+        await saveLocation(GROUP, lat, lng);
+
+        // 他メンバー位置をロード
+        loadOthers();
+        setInterval(loadOthers, 3000);
+    });
+    
+
+    //--------------------------------------------
+    // ⑤ Supabaseへ位置を保存
+    //--------------------------------------------
+    async function saveLocation(group, lat, lng) {
+        await supabase
+            .from("locations")
+            .insert({
+                group_name: group,
+                lat: lat,
+                lng: lng
+            });
     }
 
-    // --- Supabase に保存 ---
-    await supabase.from("locations").insert({
-      group_name: groupName,
-      lat,
-      lng,
-    });
+    //--------------------------------------------
+    // ⑥ Supabaseから他ユーザーの位置を取得
+    //--------------------------------------------
+    async function loadOthers() {
+        const { data } = await supabase
+            .from("locations")
+            .select("*")
+            .eq("group_name", GROUP)
+            .order("updated_at", { ascending: false });
 
-  });
+        // 古いマーカー消す
+        otherMarkers.forEach(m => map.removeLayer(m));
+        otherMarkers = [];
 
-  // --- 他メンバーの現在地を表示 ---
-  setInterval(async () => {
-    const { data } = await supabase
-      .from("locations")
-      .select("*")
-      .eq("group_name", groupName)
-      .order("updated_at", { ascending: false })
-      .limit(20);
-
-    data.forEach((row) => {
-      L.circleMarker([row.lat, row.lng], {
-        radius: 6,
-        color: "#0984e3",
-        fillColor: "#74b9ff",
-        fillOpacity: 0.9,
-      }).addTo(map);
-    });
-  }, 5000);
-
+        // 自分以外を表示
+        data.forEach(item => {
+            const marker = L.marker([item.lat, item.lng])
+                .addTo(map)
+                .bindPopup(`メンバー<br>グループ: ${item.group_name}`);
+            otherMarkers.push(marker);
+        });
+    }
 })();