78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
||
/// <reference types="google.maps" />
|
||
|
||
import { useEffect, useRef } from "react";
|
||
import Script from "next/script";
|
||
|
||
declare global {
|
||
interface Window {
|
||
initMap?: () => void;
|
||
google?: typeof google;
|
||
}
|
||
}
|
||
|
||
type Props = { lat?: number; lng?: number; zoom?: number };
|
||
|
||
export default function GoogleMap({
|
||
lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
|
||
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, // 🛰 Satellite tugmasi
|
||
streetViewControl: true, // Street View tugmasi
|
||
fullscreenControl: true, // Fullscreen
|
||
zoomControl: true, // Zoom tugmalari
|
||
mapTypeControlOptions: {
|
||
style: google.maps.MapTypeControlStyle.DEFAULT,
|
||
position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
|
||
},
|
||
});
|
||
|
||
// 📌 Marker
|
||
new google.maps.Marker({
|
||
position: center,
|
||
map,
|
||
title: "Bizning manzil",
|
||
});
|
||
|
||
// 🧭 Koordinata oynasini yaratamiz
|
||
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);
|
||
};
|
||
|
||
if (window.google && window.google.maps && typeof window.initMap === "function") {
|
||
window.initMap();
|
||
}
|
||
}, [lat, lng, zoom]);
|
||
|
||
return (
|
||
<>
|
||
<Script
|
||
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
|
||
strategy="afterInteractive"
|
||
/>
|
||
<div ref={mapRef} style={{ width: "100%", height: "600px", overflow: "hidden" }} />
|
||
</>
|
||
);
|
||
}
|