diff --git a/components/lib_components/google.map.tsx b/components/lib_components/google.map.tsx index f433a8a..6d971b0 100644 --- 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(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: ` +
+ Bizning joylashuv:
+ Toshkent sh., Mustaqillik maydoni
+ Yandex xaritada ochish +
+ `, + }, + { + iconColor: "#ff0000", + draggable: false, + } + ); + + map.geoObjects.add(placemark); + }); + } + }, [lat, lng, zoom]); return ( -
- - - - Bizning joylashuv:
- Toshkent sh., Mustaqillik maydoni
- Yandex xaritada ochish -
- `, - }} - options={{ - iconColor: "#ff0000", - draggable: false, - }} - /> - - - +
); } diff --git a/package-lock.json b/package-lock.json index d379aa9..e9fd918 100644 --- 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", diff --git a/package.json b/package.json index c719775..bb4b936 100644 --- 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", diff --git a/types/ymaps.d.ts b/types/ymaps.d.ts new file mode 100644 index 0000000..2ea1c9e --- /dev/null +++ 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; +}