diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx index 865b489..31bc4f8 100644 --- a/src/components/Gallery.tsx +++ b/src/components/Gallery.tsx @@ -18,7 +18,6 @@ export default function Gallery() { const [totalMiles, setTotalMiles] = useState(0); const [geometryLoaded, setGeometryLoaded] = useState(false); - // Sunucudan dynamic olarak çekeceğimiz key için state const [runtimeApiKey, setRuntimeApiKey] = useState(""); const locationsRef = useRef([]); @@ -31,7 +30,6 @@ export default function Gallery() { const svServiceRef = useRef(null); const activePolylinesRef = useRef<{ id: string; polyline: google.maps.Polyline; bounds: google.maps.LatLngBounds; firstCoord: google.maps.LatLngLiteral }[]>([]); - // 1. Sayfa mount olduğunda runtime API keyi kap gel useEffect(() => { fetch("/api/config") .then((res) => res.json()) @@ -41,7 +39,6 @@ export default function Gallery() { .catch((err) => console.error("Error fetching config:", err)); }, []); - // Fetch locations useEffect(() => { const queryParams = new URLSearchParams(window.location.search); const initialLocId = queryParams.get("locationId"); @@ -64,7 +61,6 @@ export default function Gallery() { .catch((err) => console.error("Error fetching locations:", err)); }, []); - // Filter locations useEffect(() => { const term = search.toLowerCase(); setFilteredLocations( @@ -74,12 +70,10 @@ export default function Gallery() { ); }, [search, locations]); - // Load Google Maps API & Initialize useEffect(() => { - if (!runtimeApiKey) return; // Key gelene kadar bekle, haritayı patlatma - + if (!runtimeApiKey) return; setOptions({ - key: runtimeApiKey, // Dynamic runtime key devrede + key: runtimeApiKey, v: "weekly", }); @@ -126,7 +120,6 @@ export default function Gallery() { defaultStreetView.setVisible(false); if (pos) { - // Pegman drop interception key'i yenilendi setIframeUrl(`https://www.google.com/maps/embed/v1/streetview?key=${runtimeApiKey}&location=${pos.lat()},${pos.lng()}&heading=0&pitch=0&fov=90`); setViewingStreetView(true); @@ -138,9 +131,8 @@ export default function Gallery() { } }); }); - }, [runtimeApiKey]); // runtimeApiKey gelince tetiklenecek + }, [runtimeApiKey]); - // Draw all GPX routes for filtered locations useEffect(() => { if (!googleMapObj.current || typeof window === 'undefined' || !window.google || !geometryLoaded || !runtimeApiKey) return; @@ -211,7 +203,6 @@ export default function Gallery() { firstCoord: coords[0] }); - // Main Map click polyline.addListener("click", (clickEvent: google.maps.MapMouseEvent) => { if (!clickEvent.latLng) return; const clickPos = clickEvent.latLng; @@ -224,7 +215,6 @@ export default function Gallery() { } }); - // Mini Map click miniPolyline.addListener("click", (clickEvent: google.maps.MapMouseEvent) => { if (!clickEvent.latLng) return; const clickPos = clickEvent.latLng; @@ -237,7 +227,6 @@ export default function Gallery() { } }); - // Generate Static Map Thumbnail URL (Runtime key kullanıyor) try { const maxThumbnailPoints = 150; const step = Math.max(1, Math.floor(coords.length / maxThumbnailPoints)); @@ -257,9 +246,8 @@ export default function Gallery() { googleMapObj.current.fitBounds(bounds); } - }, [filteredLocations, geometryLoaded, selectedLocation, runtimeApiKey]); // runtimeApiKey dependecy eklendi + }, [filteredLocations, geometryLoaded, selectedLocation, runtimeApiKey]); - // Handle Selection Highlights and panning smoothly useEffect(() => { if (!googleMapObj.current || !geometryLoaded) return; @@ -278,7 +266,6 @@ export default function Gallery() { }); }, [selectedLocation, geometryLoaded]); - // Update URL when selection changes useEffect(() => { if (!selectedLocation) return; if (typeof window !== "undefined") { @@ -361,7 +348,7 @@ export default function Gallery() { onClick={() => handleLocationSelect(loc)} style={{ cursor: "pointer", overflow: "hidden" }} > - {/* --- MOBILE LAYOUT --- */} + {/* mobile layout */}
{thumbnails[loc.id] ? ( @@ -402,7 +389,7 @@ export default function Gallery() {
- {/* --- DESKTOP LAYOUT --- */} + {/* desktop layout */}
{thumbnails[loc.id] ? (