Saytga xarita qo‘shish: Google Maps, Yandex Xaritalar, Leaflet

Qisqa javob

Bitta manzilli «Kontaktlar» sahifasi uchun Google Maps yoki Yandex Xaritalardan o‘rnatilgan iframe yetarli: kod yozish shart emas, bir necha daqiqalik ish. Agar xaritada ko‘p nuqta (filiallar, topshirish punktlari), filtrlar yoki belgilarning o‘ziga xos dizayni kerak bo‘lsa, interaktiv JS xarita kerak: Google Maps JavaScript API, Yandex Xaritalar API yoki ochiq kodli Leaflet kutubxonasi.

Har qanday holatda xarita og‘ir: skriptlar, tayllar, shriftlar. Shuning uchun asosiy qoida — uni darhol yuklamang, faqat kerak bo‘lganda yuklang.

Provayderlarni taqqoslash

Barcha provayderlarning tariflari va limitlari vaqti-vaqti bilan o‘zgaradi, shuning uchun ishga tushirishdan oldin amaldagi shartlarni tekshiring. Qamrovni ham o‘z manzillaringizda tekshiring: kerakli tumanni har bir xizmatda ochib, mijozlaringiz biladigan uy raqamlari va ko‘cha nomlari bor-yo‘qligini ko‘ring.

1-variant: besh daqiqada iframe

1. Manzilni xaritada toping.
2. Google Maps da: «Ulashish» → «Xaritani joylashtirish». Yandex Xaritalarda: Xaritalar konstruktori, unda belgi va yozuv qo‘yish mumkin.
3. Kodni nusxalab, sahifaga qo‘ying.

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="100%" height="400"
  style="border:0"
  loading="lazy"
  title="Ofisga yo‘l xaritasi"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

loading="lazy" atributining o‘zi sezilarli foyda beradi: brauzer iframe ekrandan uzoqda turganda uni yuklamaydi. title ni unutmang — uni ekran o‘quvchi dastur o‘qiydi.

2-variant: Leaflet da belgili interaktiv xarita

Leaflet — yengil ochiq kodli kutubxona. Tayllarni (xarita rasmlarini) istalgan provayderdan oladi.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<div id="map" style="height:400px"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map("map").setView([41.311, 69.279], 12);
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  const offices = [
    { name: "1-ofis", coords: [41.311, 69.279] },
    { name: "2-ofis", coords: [41.338, 69.334] }
  ];
  offices.forEach(o => L.marker(o.coords).addTo(map).bindPopup(o.name));
</script>

Muhim: OpenStreetMap ning ommaviy tayllari foydalanish siyosatiga ega va yuklamasi katta tijoriy loyihalarga mo‘ljallanmagan. Production uchun tijoriy tayl provayderini ulang yoki o‘z serveringizni ko‘taring. Ma’lumot manbasi atributsiyasini olib tashlash mumkin emas.

Google va Yandex bilan mantiq bir xil: kalit bilan skriptni ulaysiz, konteynerda xarita yaratasiz, massivdan belgilar qo‘shasiz. Provayder konsolida kalitni domen bo‘yicha (HTTP referrer) cheklang, aks holda uni begona saytlarda sizning hisobingizdan ishlatishlari mumkin.

Sahifani qanday sekinlashtirmaslik kerak

• Dangasa yuklash. Xarita skriptini konteyner ekranga yaqinlashgandagina ulang.
• Fasad. Xaritaning statik rasmini «Xaritani ochish» tugmasi bilan ko‘rsating, haqiqiy xaritani esa bosilganda yuklang.
• Konteynerning qat’iy balandligi, toki yuklanishda maket sakramasin (CLS).
• Xaritani birinchi ekranga qo‘ymang, agar u sahifaning asosiy maqsadi bo‘lmasa.
• Belgilarni klasterlash, agar nuqtalar yuzlab bo‘lsa: aks holda xarita telefonlarda qotadi.

const el = document.getElementById("map");
const io = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  io.disconnect();
  const { initMap } = await import("./map.js");
  initMap(el);
}, { rootMargin: "200px" });
io.observe(el);

Ko‘p uchraydigan xatolar

• Domen bo‘yicha cheklanmagan API kalit.
• Mobil qurilmada butun kenglikdagi xarita barmoqni «ushlab qoladi» va sahifani aylantirib bo‘lmaydi. Bir barmoq bilan sudrashni o‘chiring yoki xaritani pastroq qiling.
• Xarita yonida matnli manzil yo‘q. Manzil matn ko‘rinishida odamlarga ham, qidiruv tizimlariga ham kerak.
• Bitta saytda bir nechta xarita provayderi — foydasiz ortiqcha og‘irlik.