maps

2025-10-08 15:11:25 +05:00
parent 1b3b79c217
commit cdc6633091
11 changed files with 204 additions and 24 deletions
--- a/components/google.map.tsx
+++ b/components/google.map.tsx
@@ -0,0 +1,77 @@
+"use client";
+/// <reference types="google.maps" />
+
+import { useEffect, useRef } from "react";
+import Script from "next/script";
+
+declare global {
+  interface Window {
+    initMap?: () => void;
+    google?: typeof google;
+  }
+}
+
+type Props = { lat?: number; lng?: number; zoom?: number };
+
+export default function GoogleMap({
+  lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
+  lng = 69.2191111,
+  zoom = 17,
+}: Props) {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    window.initMap = () => {
+      if (!mapRef.current || !window.google) return;
+
+      const center = new google.maps.LatLng(lat, lng);
+      const map = new google.maps.Map(mapRef.current, {
+        center,
+        zoom,
+        mapTypeControl: true,          // 🛰 Satellite tugmasi
+        streetViewControl: true,      // Street View tugmasi
+        fullscreenControl: true,      // Fullscreen
+        zoomControl: true,            // Zoom tugmalari
+        mapTypeControlOptions: {
+          style: google.maps.MapTypeControlStyle.DEFAULT,
+          position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
+        },
+      });
+
+      // 📌 Marker
+      new google.maps.Marker({
+        position: center,
+        map,
+        title: "Bizning manzil",
+      });
+
+      // 🧭 Koordinata oynasini yaratamiz
+      const coordDiv = document.createElement("div");
+      coordDiv.style.background = "#fff";
+      coordDiv.style.padding = "15px 30px";
+      coordDiv.style.margin = "15px 30px";
+      coordDiv.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
+      coordDiv.innerHTML = `
+        <div style="font-size: 14px; font-weight: 500;">
+          41°15'46.1"N 69°13'08.8"E<br/>
+          <a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank" style="color: #1a73e8; text-decoration: none;">View larger map</a>
+        </div>
+      `;
+      map.controls[google.maps.ControlPosition.TOP_LEFT].push(coordDiv);
+    };
+
+    if (window.google && window.google.maps && typeof window.initMap === "function") {
+      window.initMap();
+    }
+  }, [lat, lng, zoom]);
+
+  return (
+    <>
+      <Script
+        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
+        strategy="afterInteractive"
+      />
+      <div ref={mapRef} style={{ width: "100%", height: "500px", overflow: "hidden" }} />
+    </>
+  );
+}