Jak přidat mapy do aplikace: vložené mapy, interaktivní mapy a vyhledávání poboček

Mapu do aplikace přidáte tak, že nejdřív rozhodnete, zda potřebujete statické vložení (jedno místo s špendlíkem, například „najděte naši prodejnu“), nebo interaktivní mapu (mnoho špendlíků z vašich dat, filtry, shlukování, „v mém okolí“). Pro jedno místo je vložená mapa nejrychlejší a s Maps Embed API od Googlu zdarma. Pro interaktivní mapy použijte JavaScriptovou knihovnu pro mapy: Google Maps JavaScript API, Mapbox GL JS, nebo open-source Leaflet s poskytovatelem dlaždic. Zeměpisnou šířku a délku každého místa ukládejte do databáze a omezte svůj API klíč na vlastní doménu. Údaje o poskytovatelích níže pocházejí z jejich vlastní dokumentace ke zářím 2026.

Jaký typ mapy potřebujete?

Většina malých firemních webů potřebuje jen první řádek. Adresáře, tržiště a výpisy potřebují třetí a čtvrtý.

Vaše možnosti

Google Maps Platform

Průvodce začátkem od Googlu uvádí, že musíte vytvořit projekt v Cloudu s povolenou fakturací a povolit API, která chcete. Jeho cenový model pay-as-you-go nabízí SKU z Essentials, včetně Dynamic Maps, s měsíčním bezplatným limitem 10 000 událostí, a Dynamic Maps uvádí na 7,00 USD za 1 000 událostí nad tímto limitem (v prvním cenovém pásmu). SKU Maps Embed je uvedeno jako neomezené a zdarma. Google také prodává měsíční předplatné. Aktuální čísla najdete na ceníku Google Maps Platform.

Mapbox

Ceník Mapboxu uvádí 50 000 bezplatných měsíčních načtení map pro Mapbox GL JS na webu, pak 5,00 USD za 1 000 načtení. Viz ceník Mapbox.

Leaflet a OpenStreetMap

Leaflet se popisuje jako open-source JavaScriptová knihovna pro mobilně přívětivé interaktivní mapy, zhruba 42 KB JavaScriptu. Potřebuje dlaždice mapy (obrázky mapy) odkudsi. Veřejné servery dlaždic OpenStreetMap lákají, ale zásady používání dlaždic vyžadují viditelné uvedení zdroje, zakazují hromadné stahování, neposkytují žádnou garanci služby a komerční služby varují, že přístup může být odebrán. Pro skutečný produkt použijte komerční nebo vlastní zdroj dlaždic, který funguje s Leafletem.

API klíče: veřejné, ale omezené

Klíče pro mapy použité v prohlížeči jsou viditelné každému, kdo otevře vaši stránku. To je očekávané, ale znamená to, že někdo může klíč zkopírovat a zvýšit využití na vašem účtu. Bezpečnostní doporučení Googlu je přidat omezení podle webu (HTTP referrer) se seznamem vašich domén a omezení API, aby klíč fungoval jen pro API, která používáte.

Klíče pro serverové služby, například geokódování tisíců adres, by měly být oddělené klíče uložené v tajných údajích na serveru, ne na stránce. Nastavte také upozornění na rozpočet nebo kvóty v konzoli poskytovatele, aby chyba nemohla přerůst ve velký účet.

Geokódování: převeďte adresy na souřadnice jednou

Mapy vykreslují zeměpisnou šířku a délku, ne adresy. Převod adresy na souřadnice se nazývá geokódování a většina poskytovatelů účtuje za každý požadavek. Efektivní postup:

1. Když se záznam uloží, geokódujte jeho adresu na serveru.
2. Uložte zeměpisnou šířku a délku do databáze.
3. Mapa čte uložené souřadnice; nikdy negeokóduje při zobrazení stránky.

Zkontrolujte podmínky každého poskytovatele, jak dlouho smíte výsledky geokódování ukládat; liší se.

Příklady promptů

Jedna vložená mapa:

Na stránku Kontakt přidej vloženou mapu Google, která ukáže naši adresu (12 High Street, Leeds), pomocí Maps Embed API s klíčem v GOOGLE_MAPS_EMBED_KEY. Pod ni přidej odkaz „Navigovat“. Na telefonech ať je na celou šířku a načítej ji líně.

Interaktivní mapa nabídek:

Přidej do tabulky nabídek zeměpisnou šířku a délku. Když se nabídka vytvoří nebo se změní její adresa, geokóduj ji na serveru s klíčem v GEOCODING_API_KEY a souřadnice ulož. Na stránce Procházet zobraz mapu se značkou pro každou nabídku pomocí Leafletu se shlukováním, když se značky překrývají. Kliknutí na značku zobrazí název, cenu a odkaz. Mapa i seznam mají používat stejné filtry.

„V mém okolí“:

Přidej tlačítko „V mém okolí“, které požádá o polohu návštěvníka a ukáže nabídky do 10 km seřazené podle vzdálenosti. Pokud přístup k poloze odmítne, nech ho zadat město.

Postup krok za krokem

1. Vyberte typ mapy z tabulky nahoře.
2. Vytvořte účet u poskytovatele a projekt a povolte jen API, která potřebujete.
3. Vytvořte klíče: klíč pro prohlížeč omezený na vaše domény (včetně náhledové domény během stavění) a případně serverový klíč pro geokódování.
4. Uložte klíče jako tajné údaje a požádejte svůj nástroj, aby je použil; klíč pro prohlížeč je přesto omezený, i když skončí na stránce.
5. Uložte souřadnice každého místa do databáze.
6. Postavte mapu: značky, bubliny s informacemi, shlukování a rozumné výchozí přiblížení.
7. Doplňte seznamem. Samotná mapa je na telefonu i pro čtečky obrazovky těžko použitelná. Zobrazte stejné výsledky jako seznam.
8. Nastavte upozornění na rozpočet v konzoli poskytovatele.
9. Publikujte a otestujte na živé doméně, protože omezení podle referreru často zablokují mapu, dokud nepřidáte živou doménu.

Časté chyby

• Neomezené klíče. Kdokoli je může použít na svém webu.
• Geokódování při každém zobrazení stránky. Pomalé a drahé; geokódujte jednou při uložení.
• Zapomenutá živá doména v omezeních klíče. Funguje v náhledu, v produkci je prázdný šedý box.
• Rozložení jen s mapou. Špendlíky bez seznamu jsou na malých obrazovkách nepohodlné a nepřístupné.
• Stovky značek bez shlukování. Nečitelné a pomalé.
• Chybějící uvedení zdroje. Většina poskytovatelů map a dlaždic jej vyžaduje a jeho skrytí porušuje jejich podmínky.
• Žádost o polohu při načtení stránky. Žádejte jen tehdy, když uživatel klikne na „V mém okolí“.

Kontrolní seznam

• Pro daný účel je zvolen správný typ mapy
• Klíč pro prohlížeč je omezený na vaše domény a potřebná API
• Serverové klíče jsou v tajných údajích
• Souřadnice jsou uložené v databázi, geokódované jednou
• Výsledky jsou zobrazené také jako seznam
• Shlukování pro mnoho značek
• Uvedení zdroje je viditelné
• U poskytovatele je nastavené upozornění na rozpočet
• Otestováno na publikované doméně a na telefonu

Přidání map v Mythexu

Mythex nemá vestavěnou integraci map; přinesete vlastní klíč poskytovatele, uložíte ho jako tajný údaj projektu (nebo ho vložíte, když agent ukáže kartu s tajnými údaji) a o mapu požádáte v chatu, jak je popsáno v Integrate any API. Souřadnice patří do databáze projektu. Nezapomeňte přidat jak náhledovou, tak publikovanou doménu do omezení webu u klíče a po změně tajných údajů publikujte znovu.

Mapy obvykle sedí vedle vyhledávání a výpisů: viz jak přidat vyhledávání do aplikace, jak postavit web adresáře a jak postavit web malé firmy.

Otázky