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 Script from "next/script";
+import React from "react";
+import { YMaps, Map, Placemark, ZoomControl, TypeSelector, FullscreenControl } from "@pbe/react-yandex-maps";
 
-declare global {
-  interface Window {
-    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]);
+export default function YandexMap() {
+  const location = { lat: 41.3111, lng: 69.2406 };
 
   return (
-    <>
-      <Script
-        async
-        defer
-        src={`https://maps.googleapis.com/maps/api/js?key=AIzaSyARZe3FPgMT0p-CwDD-iYvpz2Mh8jkUxR0&callback=initMap&libraries=marker`}
-        strategy="afterInteractive"
-      />
-      <div ref={mapRef} style={{ width: "100%", height: "600px" }} />
-    </>
+    <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>
   );
 }

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 */}