yandes types issue

2025-11-08 19:40:02 +05:00
parent 34c81f750f
commit 63a930afae
4 changed files with 98 additions and 65 deletions
--- a/components/lib_components/google.map.tsx
+++ b/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>
  );
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
      "name": "spestexnika_next",
      "version": "0.1.0",
      "dependencies": {
-        "@pbe/react-yandex-maps": "^1.2.5",
        "antd": "^5.27.4",
        "axios": "^1.13.2",
        "framer-motion": "^12.23.24",
@@ -808,21 +807,6 @@
        "node": ">= 10"
      }
    },
-    "node_modules/@pbe/react-yandex-maps": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@pbe/react-yandex-maps/-/react-yandex-maps-1.2.5.tgz",
-      "integrity": "sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/yandex-maps": "2.1.29"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "react": "^16.x || ^17.x || ^18.x"
-      }
-    },
    "node_modules/@rc-component/async-validator": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
@@ -1317,7 +1301,6 @@
      "version": "19.2.0",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
      "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.0.2"
@@ -1343,12 +1326,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/yandex-maps": {
-      "version": "2.1.29",
-      "resolved": "https://registry.npmjs.org/@types/yandex-maps/-/yandex-maps-2.1.29.tgz",
-      "integrity": "sha512-nuibRWj3RU/9KXlCzTrRtDE+n6V9l7NbT9JakicqZ5OXIdwyb6blvV2Uwn6lB58WYm3DSUDP2I2AWlnWMc8z2w==",
-      "license": "MIT"
-    },
    "node_modules/antd": {
      "version": "5.27.4",
      "resolved": "https://registry.npmjs.org/antd/-/antd-5.27.4.tgz",
@@ -3524,7 +3501,7 @@
      "version": "5.9.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
    "start": "next start"
  },
  "dependencies": {
-    "@pbe/react-yandex-maps": "^1.2.5",
    "antd": "^5.27.4",
    "axios": "^1.13.2",
    "framer-motion": "^12.23.24",
--- a/types/ymaps.d.ts
+++ b/types/ymaps.d.ts
@@ -0,0 +1,39 @@
+// src/types/ymaps.d.ts
+declare namespace ymaps {
+  interface MapOptions {
+    center: number[];
+    zoom: number;
+    controls?: string[];
+  }
+
+  class Map {
+    constructor(container: HTMLElement, options: MapOptions);
+    geoObjects: {
+      add(obj: any): void;
+    };
+    controls: any;
+  }
+
+  interface PlacemarkOptions {
+    iconColor?: string;
+    draggable?: boolean;
+  }
+
+  interface PlacemarkProperties {
+    balloonContent?: string;
+  }
+
+  class Placemark {
+    constructor(
+      coords: number[],
+      properties?: PlacemarkProperties,
+      options?: PlacemarkOptions
+    );
+  }
+
+  function ready(callback: () => void): void; // ✅ shu qator qo‘shildi
+}
+
+interface Window {
+  ymaps: typeof ymaps;
+}