Ako pridať mapy do aplikácie: vložené mapy, interaktívne mapy a vyhľadávače pobočiek

Mapu do aplikácie pridáte tak, že najprv rozhodnete, či potrebujete statické vloženie (jedno miesto s kolíkom, napríklad „nájdite našu predajňu“), alebo interaktívnu mapu (veľa kolíkov z vašich dát, filtre, zhlukovanie, „v mojom okolí“). Pre jedno miesto je vložená mapa najrýchlejšia a s Maps Embed API od Google aj bezplatná. Pre interaktívne mapy použite JavaScriptovú knižnicu pre mapy — Google Maps JavaScript API, Mapbox GL JS alebo open-source Leaflet s poskytovateľom dlaždíc — uložte zemepisnú šírku a dĺžku každého miesta vo svojej databáze a API kľúč obmedzte na vašu vlastnú doménu. Údaje o poskytovateľoch nižšie sú z ich vlastnej dokumentácie k septembru 2026.

Aký druh mapy potrebujete?

Väčšina malých firemných webov potrebuje len prvý riadok. Adresáre, trhoviská a stránky so zoznamami potrebujú tretí a štvrtý.

Vaše možnosti

Google Maps Platform

Sprievodca Google na začiatok hovorí, že musíte vytvoriť cloudový projekt s povoleným fakturovaním a povoliť API, ktoré chcete. Jeho pay-as-you-go cenník dáva SKU Essentials vrátane Dynamic Maps mesačný bezplatný limit 10 000 udalostí a uvádza Dynamic Maps za 7,00 USD za každých 1 000 udalostí nad to (pri prvom objemovom pásme). SKU Maps Embed je uvedené ako neobmedzené a bezplatné. Google tiež predáva mesačné predplatné. Aktuálne čísla nájdete na cenníku Google Maps Platform.

Mapbox

Cenník Mapbox uvádza 50 000 bezplatných mesačných načítaní mapy pre Mapbox GL JS na webe, potom 5,00 USD za každých 1 000 načítaní. Pozri cenník Mapbox.

Leaflet a OpenStreetMap

Leaflet sa opisuje ako open-source JavaScriptová knižnica pre mobilné interaktívne mapy, s približne 42 KB JavaScriptu. Potrebuje dlaždice mapy (obrázky mapy) odniekiaľ. Verejné servery dlaždíc OpenStreetMap lákajú, ale zásady používania dlaždíc vyžadujú viditeľné uvedenie zdroja, zakazujú hromadné sťahovanie, nedávajú žiadnu záruku dostupnosti a komerčným službám upozorňujú, že prístup môže byť odobratý. Pre skutočný produkt použite komerčný alebo vlastný zdroj dlaždíc, ktorý funguje s Leafletom.

API kľúče: verejné, ale obmedzené

Kľúče máp použité v prehliadači sú viditeľné pre každého, kto otvorí vašu stránku. To je očakávané, ale znamená to, že niekto môže skopírovať váš kľúč a zvýšiť spotrebu na vašom účte. Bezpečnostné odporúčanie Google je pridať obmedzenia webových odkazov (HTTP referrer) so zoznamom vašich domén a obmedzenia API, aby kľúč fungoval len pre API, ktoré používate.

Kľúče pre služby na serveri — napríklad geokódovanie tisícok adries — majú byť oddelené kľúče uložené v tajomstvách na strane servera, nie na stránke. Nastavte tiež upozornenia na rozpočet alebo kvóty v konzole poskytovateľa, aby chyba nemohla prerásť do veľkého účtu.

Geokódovanie: premeňte adresy na súradnice raz

Mapy zobrazujú zemepisnú šírku a dĺžku, nie adresy. Prevod adresy na súradnice sa volá geokódovanie a väčšina poskytovateľov ho účtuje za požiadavku. Efektívny vzor:

1. Pri uložení záznamu geokódujte jeho adresu na serveri.
2. Uložte zemepisnú šírku a dĺžku do databázy.
3. Mapa číta uložené súradnice; nikdy negeokóduje pri zobrazení stránky.

Podmienky každého poskytovateľa skontrolujte, ako dlho smiete ukladať výsledky geokódovania; líšia sa.

Príklady promptov

Jedna vložená mapa:

Na stránku Kontakt pridaj vloženú mapu Google, ktorá ukazuje našu adresu (12 High Street, Leeds), pomocou Maps Embed API s kľúčom v GOOGLE_MAPS_EMBED_KEY. Pod ňu pridaj odkaz „Získať navigáciu“. Na telefónoch nech je na celú šírku a načítaj ju lenivo.

Interaktívna mapa ponúk:

Pridaj zemepisnú šírku a dĺžku do tabuľky ponúk. Keď sa ponuka vytvorí alebo sa zmení jej adresa, geokóduj ju na serveri s kľúčom v GEOCODING_API_KEY a ulož súradnice. Na stránke Prehliadať zobraz mapu s kolíkom pre každú ponuku pomocou Leafletu, so zhlukovaním, keď sa kolíky prekrývajú. Kliknutie na kolík zobrazí názov, cenu a odkaz. Mapa a zoznam majú používať rovnaké filtre.

„V mojom okolí“:

Pridaj tlačidlo „V mojom okolí“, ktoré si vypýta polohu návštevníka a zobrazí ponuky do 10 km, zoradené podľa vzdialenosti. Ak polohu odmietne, nech môže zadať mesto.

Krok za krokom

1. Vyberte typ mapy z tabuľky na začiatku.
2. Vytvorte účet u poskytovateľa a projekt a povoľte len API, ktoré potrebujete.
3. Vytvorte kľúče: kľúč pre prehliadač obmedzený na vaše domény (vrátane náhľadovej domény počas stavby) a podľa potreby kľúč pre server na geokódovanie.
4. Uložte kľúče ako tajomstvá a požiadajte svojho nástroja, aby ich použil; kľúč pre prehliadač je aj tak obmedzený, aj keď skončí na stránke.
5. Uložte súradnice pre každé miesto do databázy.
6. Vytvorte mapu: kolíky, vyskakovacie okná, zhlukovanie a rozumnú predvolenú úroveň priblíženia.
7. Spárujte ju so zoznamom. Samotná mapa je ťažko použiteľná na telefóne a pre čítačky obrazovky. Zobrazte rovnaké výsledky ako zoznam.
8. Nastavte upozornenie na rozpočet v konzole poskytovateľa.
9. Publikujte a otestujte na živej doméne, lebo obmedzenia podľa odkazu často blokujú mapu, kým nepridáte živú doménu.

Bežné chyby

• Neobmedzené kľúče. Ktokoľvek ich môže znova použiť na svojom webe.
• Geokódovanie pri každom zobrazení stránky. Pomalé a drahé; geokódujte raz pri uložení.
• Zabudnutá živá doména v obmedzeniach kľúča. Funguje v náhľade, v produkcii prázdny sivý obdĺžnik.
• Rozloženia len s mapou. Kolíky bez zoznamu sú na malých obrazovkách bolestivé a nedostupné.
• Stovky kolíkov bez zhlukovania. Nečitateľné a pomalé.
• Chýbajúci zdroj údajov. Väčšina poskytovateľov máp a dlaždíc ho vyžaduje a jeho skrytie porušuje ich podmienky.
• Pýtanie polohy pri načítaní stránky. Pýtajte sa len vtedy, keď používateľ klikne na „V mojom okolí“.

Kontrolný zoznam

• Pre danú úlohu je zvolený správny typ mapy
• Kľúč pre prehliadač je obmedzený na vaše domény a potrebné API
• Kľúče pre server sú uložené v tajomstvách
• Súradnice sú uložené v databáze, geokódované raz
• Výsledky sa zobrazujú aj ako zoznam
• Zhlukovanie pre veľa kolíkov
• Zdroj údajov je viditeľný
• Upozornenie na rozpočet nastavené u poskytovateľa
• Otestované na publikovanej doméne a na telefóne

Pridávanie máp s Mythexom

Mythex nemá vstavanú integráciu máp; prinesiete vlastný kľúč poskytovateľa, pridáte ho ako tajomstvo projektu (alebo ho vložíte, keď agent zobrazí kartu s tajomstvami) a mapu si vyžiadate v chate, ako je opísané v Integrácii ľubovoľného API. Súradnice patria do databázy projektu. Nezabudnite pridať náhľadovú aj publikovanú doménu do obmedzení webových odkazov kľúča a po zmene tajomstiev publikujte znova.

Mapy zvyčajne stoja vedľa vyhľadávania a zoznamov: pozrite si ako pridať vyhľadávanie do aplikácie, ako vytvoriť webový adresár a ako vytvoriť web pre malú firmu.

Otázky