google maps change to yandex maps

components/lib_components/google.map.tsx

@@ -1,75 +1,47 @@
 "use client";
-/// <reference types="google.maps" />
 
-import { useEffect, useRef } from "react";
+import React from "react";
-import Script from "next/script";
+import { YMaps, Map, Placemark, ZoomControl, TypeSelector, FullscreenControl } from "@pbe/react-yandex-maps";
 
-declare global {
+export default function YandexMap() {
-  interface Window {
+  const location = { lat: 41.3111, lng: 69.2406 };
-    initMap?: () => void;
-    google?: typeof google;
-  }
-}
-
-type Props = { lat?: number; lng?: number; zoom?: number };
-
-export default function GoogleMap({
-  lat = 41.2628056,
-  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,
-        streetViewControl: true,
-        fullscreenControl: true,
-        zoomControl: true,
-        mapTypeControlOptions: {
-          style: google.maps.MapTypeControlStyle.DEFAULT,
-          position: google.maps.ControlPosition.RIGHT_BOTTOM,
-        },
-      });
-
-      // ✅ Yangi marker usuli
-      new google.maps.marker.AdvancedMarkerElement({
-        map,
-        position: center,
-        title: "Bizning manzil",
-      });
-
-      // 🧭 Qo‘shimcha koordinata oynasi
-      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);
-    };
-  }, [lat, lng, zoom]);
 
   return (
-    <>
+    <div className="w-full h-[500px] overflow-hidden rounded-lg shadow-md">
-      <Script
+      <YMaps query={{ apikey: '5169ae9d-529a-43f8-9cb1-30e1a3360dac' }}>
-        async
+        <Map
-        defer
+          defaultState={{
-        src={`https://maps.googleapis.com/maps/api/js?key=AIzaSyARZe3FPgMT0p-CwDD-iYvpz2Mh8jkUxR0&callback=initMap&libraries=marker`}
+            center: [location.lat, location.lng],
-        strategy="afterInteractive"
+            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,
+            }}
           />
-      <div ref={mapRef} style={{ width: "100%", height: "600px" }} />
+        </Map>
-    </>
+      </YMaps>
+    </div>
   );
 }

components/pageParts/map.tsx

@@ -3,14 +3,14 @@
 import Title from "../lib_components/title";
 import { FaPhoneAlt, FaTelegram } from "react-icons/fa";
 import { BiTargetLock } from "react-icons/bi";
-import GoogleMap from "../lib_components/google.map";
+import YandexMap from "../lib_components/google.map";
 
 export default function Map() {
   return (
     <div dir="ltr" className="relative flex items-start justify-center">
       {/* map */}
       <div className="w-full ">
-        <GoogleMap />
+        <YandexMap />
       </div>
 
       {/* contact information */}

package-lock.json

@@ -8,6 +8,7 @@
       "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",
@@ -807,6 +808,21 @@
         "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",
@@ -1301,6 +1317,7 @@
       "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"
@@ -1326,6 +1343,12 @@
         "@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",
@@ -3501,7 +3524,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@pbe/react-yandex-maps": "^1.2.5",
     "antd": "^5.27.4",
     "axios": "^1.13.2",
     "framer-motion": "^12.23.24",