yandes types issue

components/lib_components/google.map.tsx

@@ -1,47 +1,65 @@
 "use client";
 
-import React from "react";
-import { YMaps, Map, Placemark, ZoomControl, TypeSelector, FullscreenControl } from "@pbe/react-yandex-maps";
+import React, { useEffect, useRef } from "react";
 
-export default function YandexMap() {
-  const location = { lat: 41.3111, lng: 69.2406 };
+interface YandexMapProps {
+  lat?: number;
+  lng?: number;
+  zoom?: number;
+}
+
+export default function YandexMap({
+  lat = 41.3111,
+  lng = 69.2406,
+  zoom = 12,
+}: YandexMapProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Yandex Map scriptini dinamik yuklash
+    if (!window.ymaps) {
+      const script = document.createElement("script");
+      script.src = "https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=5169ae9d-529a-43f8-9cb1-30e1a3360dac";
+      script.async = true;
+      script.onload = () => initMap();
+      document.body.appendChild(script);
+    } else {
+      initMap();
+    }
+
+    function initMap() {
+      if (!mapRef.current || !window.ymaps) return;
+
+      window.ymaps.ready(() => {
+        const map = new window.ymaps.Map(mapRef.current!, {
+          center: [lat, lng],
+          zoom,
+          controls: ["zoomControl", "typeSelector", "fullscreenControl"],
+        });
+
+        const placemark = new window.ymaps.Placemark(
+          [lat, lng],
+          {
+            balloonContent: `
+              <div style="font-size:14px">
+                <b>Bizning joylashuv:</b><br/>
+                Toshkent sh., Mustaqillik maydoni<br/>
+                <a href="https://yandex.uz/maps/?ll=${lng}%2C${lat}&z=14" target="_blank">Yandex xaritada ochish</a>
+              </div>
+            `,
+          },
+          {
+            iconColor: "#ff0000",
+            draggable: false,
+          }
+        );
+
+        map.geoObjects.add(placemark);
+      });
+    }
+  }, [lat, lng, zoom]);
 
   return (
-    <div className="w-full h-[500px] overflow-hidden rounded-lg shadow-md">
-      <YMaps query={{ apikey: '5169ae9d-529a-43f8-9cb1-30e1a3360dac' }}>
-        <Map
-          defaultState={{
-            center: [location.lat, location.lng],
-            zoom: 12,
-            controls: ["zoomControl", "typeSelector", "fullscreenControl"], // control'larni shu yerda qo‘shamiz
-          }}
-          width="100%"
-          height="500px"
-          modules={[
-            "control.ZoomControl",
-            "control.TypeSelector",
-            "control.FullscreenControl",
-            "geoObject.addon.balloon",
-          ]}
-        >
-          <Placemark
-            geometry={[location.lat, location.lng]}
-            properties={{
-              balloonContent: `
-                <div style="font-size:14px">
-                  <b>Bizning joylashuv:</b><br/>
-                  Toshkent sh., Mustaqillik maydoni<br/>
-                  <a href="https://yandex.uz/maps/?ll=${location.lng}%2C${location.lat}&z=14" target="_blank">Yandex xaritada ochish</a>
-                </div>
-              `,
-            }}
-            options={{
-              iconColor: "#ff0000",
-              draggable: false,
-            }}
-          />
-        </Map>
-      </YMaps>
-    </div>
+    <div className="w-full h-[500px] rounded-lg shadow-md overflow-hidden" ref={mapRef}></div>
   );
 }