google maps change to yandex maps
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
25
package-lock.json
generated
25
package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "spestexnika_next",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@pbe/react-yandex-maps": "^1.2.5",
|
||||
"antd": "^5.27.4",
|
||||
"axios": "^1.13.2",
|
||||
"framer-motion": "^12.23.24",
|
||||
@@ -807,6 +808,21 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@pbe/react-yandex-maps": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@pbe/react-yandex-maps/-/react-yandex-maps-1.2.5.tgz",
|
||||
"integrity": "sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/yandex-maps": "2.1.29"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.x || ^17.x || ^18.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@rc-component/async-validator": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
|
||||
@@ -1301,6 +1317,7 @@
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
@@ -1326,6 +1343,12 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/yandex-maps": {
|
||||
"version": "2.1.29",
|
||||
"resolved": "https://registry.npmjs.org/@types/yandex-maps/-/yandex-maps-2.1.29.tgz",
|
||||
"integrity": "sha512-nuibRWj3RU/9KXlCzTrRtDE+n6V9l7NbT9JakicqZ5OXIdwyb6blvV2Uwn6lB58WYm3DSUDP2I2AWlnWMc8z2w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/antd": {
|
||||
"version": "5.27.4",
|
||||
"resolved": "https://registry.npmjs.org/antd/-/antd-5.27.4.tgz",
|
||||
@@ -3501,7 +3524,7 @@
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"devOptional": true,
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pbe/react-yandex-maps": "^1.2.5",
|
||||
"antd": "^5.27.4",
|
||||
"axios": "^1.13.2",
|
||||
"framer-motion": "^12.23.24",
|
||||
|
||||
Reference in New Issue
Block a user