Xəritəni saytınıza əlavə edin
Bir <script> taqı — üçüncü tərəf yox, yalnız bizim skript. Açar domenə bağlıdır: başqası açarınızı götürsə belə, öz saytında işlədə bilməz.
Tam xəritə — filtrli
Bütün data qatları sağdakı paneldən açılıb-bağlanır: qəsəbə, kənd, küçə, metro və 9 obyekt kateqoriyası. Xəritə hərəkət etdikcə görünən sahə üçün marker-lər yüklənir.
<div id="az-map" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="map"
data-types="metro,Tibb"
data-target="#az-map"></script>
data-types — başlanğıcda aktiv qatlar. Panel istifadəçiyə qalanını açmağa imkan verir.
Ən yaxın 20 — realtime konum izləmə
Konum icazəsindən sonra istifadəçinin mövqeyi canlı izlənir (watchPosition): nöqtə hərəkət etdikcə xəritədə sürüşür, dəqiqlik dairəsi göstərilir və 120 m-dən çox yerdəyişmədə ən yaxın 20 məkan avtomatik yenilənir. Markerə basanda ad, növ, ünvan və məsafə kart şəklində açılır.
<div id="az-nearest" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="nearest"
data-live="1" <!-- realtime izləmə; birdəfəlik üçün silin -->
data-limit="20"
data-target="#az-nearest"></script>
Konum yalnız brauzerdə istifadə olunur — serverə yazılmır, saxlanmır.
Bakı metrosu — real xəritədə
Üç xətt öz rəsmi rəngləri ilə, stansiyalar düzgün sırayla xətt boyunca birləşdirilir (qol stansiyaları — Bakmil, Xocəsən — qırıq xətlə). Qovşaq stansiyaları qalın halqa ilə seçilir; paneldən xətləri ayrıca yandırıb-söndürmək olar.
<div id="az-metro" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="metro"
data-target="#az-metro"></script>
Stansiya kartında xətt, sıra nömrəsi və qovşaq məlumatı göstərilir.
Canlı axtarış + xəritə
Yaz-axtar qutusu: səhv yazılışa dözümlü axtarış (bdu, yasamal aptek, sabuncu…) — nəticələr xəritədə göstərilir.
<div id="az-search" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="search"
data-target="#az-search"></script>
Kateqoriya xəritəsi
Yalnız seçilmiş kateqoriya(lar) — məsələn bütün Tibb obyektləri (xəstəxana, aptek, klinika). Kliniki saytlar, aptek şəbəkələri, filial xəritələri üçün ideal.
<div id="az-med" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="category"
data-types="Tibb"
data-center="40.401,49.867" data-zoom="12"
data-target="#az-med"></script>
Tək məkan kartı
Ad yazırsınız — biz tapıb xəritədə kartla göstəririk. Ofisinizin "bizi tapın" xəritəsi üçün ən sadə yol.
<div id="az-place" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="place"
data-q="İçərişəhər metro"
data-target="#az-place"></script>
Hamısı birlikdə
Filtrli tam xəritə + üstündə canlı axtarış qutusu — portal / kataloq saytları üçün hazır kombinasiya.
<div id="az-full" style="height:520px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="map"
data-search="1"
data-types="metro,Tibb,Restoran və Kafe"
data-center="40.394,49.867" data-zoom="12"
data-target="#az-full"></script>
Fərdiləşdirmə — rəng, marker, kart
Hər şey sizin əlinizdədir: kateqoriya rəngləri (data-colors), marker növü — nöqtə və ya damcı-pin (data-marker), ölçüsü, kartda hansı sətirlərin görünəcəyi (data-card). Aşağıda Tibb qatı çəhrayı pin-lərlə, kartda yalnız ad + növ + ünvan.
<div id="az-custom" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="category"
data-types="Tibb"
data-colors='{"Tibb":"#e91e8c"}'
data-marker="pin" data-marker-size="30"
data-card="ad,tip,unvan"
data-center="40.383,49.85" data-zoom="14"
data-target="#az-custom"></script>
<!-- JS API ilə TAM custom kart da mümkündür: -->
<script>
AzMap.render('#az-custom', {key:'AÇAR', mode:'category', types:'Tibb',
card: m => `<b>${m.ad}</b><br>☎ Zəng: <a href="tel:012">012</a>`});
</script>
Xəritə stilləri
7 hazır stil: işıqlı, qaranlıq (dark), klassik, sadə (yazısız), voyager, relyef, peyk. data-style ilə başlanğıc stil, data-styles="1" ilə istifadəçiyə seçici panel. Aşağıda qaranlıq rejim + sağ-altda stil seçici.
<div id="az-dark" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="map"
data-style="qaranliq" <!-- isiqli | qaranliq | klassik | sade | voyager | relyef | peyk -->
data-styles="1" <!-- stil seçici paneli -->
data-types="metro,Restoran və Kafe"
data-center="40.394,49.86" data-zoom="12"
data-target="#az-dark"></script>
Xəritənin küncündəki yazı defolt «CC | AzərbaycanMap»-dır — admin embed açarı verərkən istəyə görə dəyişə bilər.
Naviqasiya — sürətölçən + nəqliyyat
Google Maps-vari canlı gediş rejimi: konum realtime izlənir, seçdiyiniz nəqliyyat işarəsi (🚗 avtomobil / 🚴 velosiped / 🚶 piyada) yolda hərəkət edir və istiqamətə görə dönür, gedilən yol izi çəkilir, aşağıda sürətölçən HUD: ani sürət (km/s), yol, müddət, orta sürət.
<div id="az-nav" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="track"
data-vehicle="car" <!-- car | bike | walk (istifadəçi də dəyişə bilir) -->
data-style="voyager"
data-target="#az-nav"></script>
Sürət cihazın GPS-indən gəlir (yoxdursa məsafə/zamandan hesablanır). Konum serverə yazılmır.
3D sürüş — əsl WebGL naviqasiya
Həqiqi 3D (MapLibre GL, WebGL): perspektivli səhnə, 3D binalar, gediş istiqamətinə hamar fırlanan kamera — Google Maps sürüş rejimi kimi. 8 nəqliyyat modeli (sedan, SUV, idman, pikap, mikroavtobus, motosiklet, velosiped, piyada) — kuzov/paltar rəngi rəng düyməsi ilə seçilir, piyada yeriyəndə addımlayır. 2D/3D düyməsi kamera bucağını dəyişir.
<div id="az-3d" style="height:460px"></div>
<script src="https://azerbaijanmap.ubermensch.cc/embed.js"
data-key="SİZİN_EMBED_AÇARINIZ"
data-mode="track"
data-view="3d" <!-- arxadan izləmə (2D/3D düyməsi ilə dəyişilir) -->
data-vehicle="sedan" <!-- sedan | suv | sport | pikap | van | moto | bike | walk -->
data-color="#e63b46" <!-- maşın / velosiped / paltar rəngi -->
data-style="voyager"
data-target="#az-3d"></script>
Kamera, fırlanma və sprite-lər tam bizim skriptdədir — əlavə kitabxana yüklənmir.
Embed / API açarı üçün müraciət
Açarlar əl ilə verilir. Formu doldurun — Qiyas sizə dönüş edəcək. Embed açarı yazdığınız domenə bağlanır: yalnız sizin saytınızdan işləyir.