48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { YMaps, Map, Placemark, ZoomControl, TypeSelector, FullscreenControl } from "@pbe/react-yandex-maps";
|
||
|
||
export default function YandexMap() {
|
||
const location = { lat: 41.3111, lng: 69.2406 };
|
||
|
||
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>
|
||
);
|
||
}
|