66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
interface YandexMapProps {
|
|
lat?: number;
|
|
lng?: number;
|
|
zoom?: number;
|
|
}
|
|
|
|
export default function YandexMap({
|
|
lat = 41.263731,
|
|
lng = 69.219434,
|
|
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] rounded-lg shadow-md overflow-hidden" ref={mapRef}></div>
|
|
);
|
|
}
|