76 lines
2.1 KiB
TypeScript
76 lines
2.1 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,
|
||
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 (
|
||
<>
|
||
<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" }} />
|
||
</>
|
||
);
|
||
}
|