Klient prišiel s jednoduchou požiadavkou. Prevádzkuje sieť šiestich reštaurácií a chcel mať všetky zobrazené na jednej mape na svojom webe. Nie zoznam adries. Nie šesť samostatne vložených Google máp, jednu na každej stránke. Jednu mapu, všetky prevádzky, ladiacu s jeho značkou.
Znie to ako maličkosť. Ukázalo sa, že je to dobrý príklad problému, na ktorý naráža veľa firiem s viacerými prevádzkami, a väčšina z nich sa uspokojí s niečím, čo celkom nesadne. A je to aj dobrý príklad niečoho iného: koľko toho dnes dokážete vytvoriť sami pomocou AI, ak ju využijete na viac než len na písanie textov.
Kde väčšina ľudí začína
Ak si vyhľadáte, ako dostať viac prevádzok na jednu mapu, takmer všade nájdete tú istú odpoveď: Google My Maps. Zadarmo, od Googlu, technicky to zvládne.
Zároveň vyzerá presne ako to, čím je: bezplatný interný nástroj Googlu spred viac než desiatich rokov, ktorý nikdy nemal byť dizajnovým prvkom moderného webu. Špendlíky sú generické. Informačné okná stiesnené. Nijako sa nedajú zladiť s vašimi farbami, písmom či fotografiami. Funguje to, ale vyzerá to, akoby ste to na web prilepili, nie postavili.
Ďalšia úroveň býva platený nástroj na mapy, ako Atlist, Storemapper, Mapize a podobné služby. Tie toho zvládnu naozaj viac. Vlastné farby špendlíkov, krajšie okná, import z tabuľky. Takmer všetky si však účtujú buď paušálny mesačný poplatok, alebo, čo je horšie, poplatok, ktorý rastie s tým, koľko návštevnosti mapa dostane. Pre malú firmu začne pravidelný účet za mapu, teda za jediný prvok na jedinej stránke, pôsobiť neúmerne. A aj pri platenej verzii zvyčajne pracujete v šablóne. Zmeníte farby, no nie samotnú štruktúru toho, ako mapa vyzerá.
Pre reštauračnú sieť s vlastnou vizuálnou identitou, so zlatými akcentmi, konkrétnou kombináciou písma a teplými fotkami, ani jedna z týchto možností nemala pôsobiť, že na web patrí.
Ako vyzerá výsledok
Toto je mapa, ktorá napokon skončila na webe klienta. Päť prevádzok v Bratislave a jedna vzdialenejšia v Piešťanoch. Keď sú blízko seba, špendlíky sa spoja do jedného zaobleného zhluku s počtom, v zlatej farbe značky, aby mapa pri oddialení nepôsobila preplnene. Po ťuknutí na špendlík sa otvorí karta s efektom matného skla, ladiaca s moderným, no príjemným vzhľadom zvyšku webu: celá fotka reštaurácie, jej názov vo farbe značky, klikateľná adresa, ktorá otvorí navigáciu v Google Mapách, krátky popis toho, čím je práve táto prevádzka výnimočná, a telefónne číslo na jedno ťuknutie.
Nič na tom nevyzerá ako hotový mapový plugin. Vyzerá to ako súčasť webu, ktorá bola preň navrhnutá, pretože bola.
Ako som to vlastne postavil (z veľkej časti cez AI)
Toto vás možno prekvapí. Väčšinu som nepísal ručne od nuly. Podstatnú časť som vytvoril tak, že som Claude, teda AI asistentovi, opisoval, čo chcem, a ladil to prompt za promptom: „daj tieto prevádzky na mapu, keď sú špendlíky blízko seba, zhluč ich, po ťuknutí otvor kartu s fotkou a tlačidlom na volanie, zlaď to s týmito farbami značky". AI vytvorila fungujúci kód. Mojou úlohou bolo vedieť, čo si vypýtať, všimnúť si, čo spravila zle, a zapojiť to do reálneho webu.
Základné stavebné prvky pod tým sú všetky bezplatné. Mapa beží na knižnici Leaflet, ktorá je open-source a potichu poháňa množstvo nástrojov, aké ste už použili bez toho, aby ste o tom vedeli. Zhlukovanie špendlíkov rieši jeden bezplatný doplnok. Podklad mapy, teda ulice a orientačné body, pochádza z bezplatnej vrstvy CartoDB, v ich svetlom štýle „Voyager", aby zlaté špendlíky a karty vynikli a nebojovali s prehusteným pozadím.
Všetko navrchu, dizajn špendlíkov, odznak so zhlukom, karta, písmo aj farby, vzniklo presne podľa značky. Nie šablóna s vymenenými farbami. Navrhnuté ako ktorákoľvek iná časť webu.
Úprimné porovnanie cien: platený nástroj na mapy vyjde aj pri skromnejšej verzii niekde na pätnásť až päťdesiat eur mesačne, občas podľa počtu návštevníkov. Toto nemá žiadny priebežný náklad. Je to súčasť webu, raz vytvorená, a tak to aj zostane.
Čo naozaj dalo prácu
Rozbehať mapu so špendlíkmi nie je ťažké a AI vás tam dostane rýchlo. Dostať ju do stavu, keď pôsobí zámerne a nie prilepene, to je tá skutočná práca, a tam ju stále musíte viesť vy.
Zavážilo zopár konkrétnych detailov:
Počiatočné priblíženie a výrez. Keď je päť prevádzok v jednom meste a jedna výrazne ďalej v inom, mapa sa musí sama rozumne nastaviť tak, aby bolo vidieť všetko, no pohľad nepôsobil čudne ani nenechával po krajoch priveľa prázdna.
Správanie na mobile. Túto mapu uvidí viac ľudí na telefóne než na počítači. Karta sa musela na malej obrazovke rozumne zmenšiť, mapa potrebovala dosť výšky, aby pôsobila použiteľne a nie stiesnene, a bolo treba dôkladne ošetriť posúvanie, aby sa pri skrolovaní stránky nezaseklo v ovládaní mapy.
Zapadnutie do existujúcej stránky. Mapa je vložená do stránky postavenej v editore, ktorý web používa a ktorý má vlastné predstavy o štýle. Dostať vlastné veľkosti špendlíkov, odsadenie karty a písmo presne do podoby, akú mali mať, a nie aby ich potichu prepísali predvolené štýly webu, si vyžiadalo pár kôl testovania priamo v živom rozložení, nie oddelene.
Najlepší príklad bol na mojom vlastnom iPhone: po ťuknutí na špendlík sa karta otvorila a o zlomok sekundy sa zasa zavrela. Prvé dve opravy od AI nezabrali. Skutočným vinníkom bol doplnok na zhlukovanie, ktorý potichu odstránil každý špendlík, čo sa pri posúvaní karty dostal mimo obrazovky, a spolu s ním zmizla aj karta. Cez toto vás nedostane žiadny prompt, kým sa nezastavíte a nepochopíte, čo sa naozaj deje.
Nič z toho nie je funkcia, ktorú by ste vypichli v ponuke. Je to rozdiel medzi mapou, ktorá vyzerá, že vznikla pre daný web, a takou, ktorá vyzerá, že ju naň niekto len hodil. A je to aj tá časť, na ktorej strávite čas, ak si to staviate sami: nie na vytvorení mapy, ale na doladení posledných desiatich percent.
Je tento prístup vhodný pre každú firmu
Nie nevyhnutne. Ak máte dve prevádzky a chcete len to, aby návštevníci našli vašu adresu, vložená Google mapa naozaj postačí, netreba to preháňať. Ak potrebujete stovky prevádzok s vyhľadávaním, filtrovaním a rozhraním v štýle vyhľadávača predajní, poriadny store-locator svoj poplatok možno obháji.
Kde sa tento prístup vyplatí, je stredná cesta. Zopár prevádzok, firma so skutočnou vizuálnou identitou, ktorú sa oplatí chrániť, a web, ktorý má značku reprezentovať, nie len vypísať údaje. Reštauračná sieť, sieť ambulancií, sieť štúdií či showroomov. Každý, pre koho je „vyzerá ako mapa každej inej firmy" reálny náklad, nie len estetická výhrada.
Ak nad tým uvažujete pre svoj web
Otázky, ktoré si stojí za to položiť: má vaša firma viac než jednu prevádzku a značku, na ktorej vám naozaj záleží? Pôsobí vaše súčasné riešenie, či už je to žiadna mapa, generická Google mapa alebo platený nástroj, že patrí k zvyšku webu, alebo že je prilepené zvonku?
Ak to druhé, máte dve úprimné možnosti. Ak sa nebojíte trochu si zašpiniť ruky, takúto mapu si viete postaviť aj sami. S veľkou pravdepodobnosťou už za nejakú AI platíte a presne na toto sa hodí, ďaleko za písaním textov. Pripravil som podrobný návod aj s reálnym kódom, aby ste to vedeli spraviť krok za krokom.
Alebo, ak nad tým nechcete tráviť večery, venujem sa tomu v rámci tvorby webových stránok a najrýchlejšie ma zastihnete cez kontaktnú stránku.
Tak či onak, platí jedno: vlastná mapa, ktorá sadne k vašej značke, už nemusí znamenať mesačný účet.
Často kladené otázky
Musím za mapu s viacerými prevádzkami platiť mesačne?
Nie. Platené nástroje na mapy si účtujú pätnásť až päťdesiat eur mesačne, často podľa návštevnosti, no vlastná mapa postavená na bezplatných knižniciach ako Leaflet nemá žiadny priebežný náklad. Zaplatíte raz za jej vytvorenie a zostane súčasťou vášho webu.
Dokážem niečo také naozaj postaviť sám s pomocou AI?
Veľkú časť áno. Ak sa vo svojom webe aspoň trochu vyznáte, AI ako Claude vie z bežných pokynov vygenerovať väčšinu fungujúcej mapy. Háčik je v poslednom kúsku: zladiť ju so značkou a správne ju zobraziť na mobile stále chce trochu ručného doladenia.
Čo je vlastne zlé na Google My Maps?
Nič, ak potrebujete len funkčnú mapu. No vyzerá presne ako bezplatný, desať rokov starý interný nástroj, ktorým je: generické špendlíky, stiesnené okná, žiadny spôsob, ako zladiť farby či písmo vašej značky. Na webe, ktorý má firmu reprezentovať, pôsobí prilepene.
Kedy sa platený store-locator naozaj oplatí?
Keď máte veľa prevádzok, desiatky až stovky, a potrebujete vyhľadávanie, filtrovanie a rozhranie v štýle vyhľadávača predajní. Pri takom rozsahu sa predplatné oplatí. Pri zopár prevádzkach býva zbytočné.
Spomalí vlastná mapa môj web?
Nie, ak je postavená s rozvahou. Leaflet je ľahký, dlaždice mapy sa načítavajú až podľa potreby a celé sa to dá udržať úsporné. Dobre spravená pridá pekný prvok bez citeľného vplyvu na rýchlosť načítania.
