Jak vytvořit vlastní filtrování mapy na webu pomocí Google Maps API

Vytvoření vlastního filtrování mapy na webu s pomocí Google Maps API umožňuje uživatelům filtrovat obchody, pobočky, události, nemovitosti, restaurace nebo servisní místa podle kategorií, města, vzdálenosti, hodnocení, otevírací doby či polohy přímo na mapě. Obvykle je potřeba získat API klíč přes Google Cloud, aktivovat Maps JavaScript API, připravit data o lokalitách ve strukturované podobě, nastavit značky (markery) nebo skupiny (clustery) a implementovat filtrování na straně klienta nebo serveru. Správné nastavení usnadní uživatelům rychlejší vyhledání požadovaného místa, zvýší dobu strávenou na stránce a zlepší konverze zejména u návštěvníků s lokálním záměrem hledání.

V této příručce se vyhneme suché teorii a ukážeme, jak filtrování mapy skutečně nasadit na web. Základní princip je stejný pro firmu s 35 pobočkami, realitní portál s 240 nabídkami nebo kliniku s 12 lokalitami; liší se však rozsah dat, výkon a bezpečnostní nastavení. V článku připraveném pro blog Hostragons si krok za krokem vysvětlíme, jak vytvořit rychlé, bezpečné, responzivní a udržitelné filtrování mapy odpovídající SEO a UX standardům roku 2026. Pokud nemáte připravenou infrastrukturu, nezapomeňte zvolit kvalitní hosting pro optimální výkon aplikace: Hostragons řešení webhostingu.

Co je vlastní filtrování mapy a kdy ho využít?

Vlastní filtrování mapy znamená, že uživatel může dynamicky zúžit zobrazené lokace na mapě podle svých kritérií. Zatímco standardní mapa zobrazí všechny body najednou, filtrování dává uživateli kontrolu. Může si například zobrazit pouze otevřené obchody, pobočky nabízející konkrétní služby, kliniky do 10 km od sebe nebo nemovitosti v určité cenové kategorii. Tento přístup je vizuálně přehlednější než klasické seznamy a na mobilních zařízeních výrazně pohodlnější.

Tato funkce je zvlášť užitečná u lokálně orientovaných podniků. Typickými příklady jsou stránky s vyhledávačem poboček, řetězce restaurací, výdejní místa zásilek, portály hotelů, kalendáře akcí, půjčovny aut, servisní centra nebo lokální průvodci. Pokud uživatel po výběru lokace přechází k volání, navigaci, rezervaci či žádosti o nabídku, není filtrování pouze estetickou vychytávkou, ale přímo nástrojem pro zvýšení konverzí.

Správný výběr komponent Google Maps API

Google Maps Platform není jen jedna API služba, ale soubor různých nástrojů, které lze kombinovat podle potřeby. Nejčastěji se používá Maps JavaScript API, které umisťuje mapu na stránku, umožňuje přidávat markery, nastavovat zoom a reagovat na interakce uživatele. Pro vyhledávání podle adresy či názvu firmy je vhodné použít Places API, pro převod adresy na souřadnice Geocoding API a pro výpočet trasy nebo vzdálenosti Directions API či Distance Matrix API.

Pro jednoduchý vyhledávač poboček často stačí pouze Maps JavaScript API. Pokud chcete, aby uživatel zadal vlastní adresu a našel nejbližší pobočku, je potřeba přidat Geocoding API. Pro zobrazení odhadované doby jízdy či vzdálenosti se využívá Distance Matrix API. Toto rozlišení je důležité kvůli nákladům, rychlosti a složitosti kódu. Nepotřebné API zbytečně navyšuje náklady i zpomaluje stránku.

Minimální potřebné služby

• Maps JavaScript API: Zobrazení mapy a správa markerů na webu.
• Geocoding API: Převod adres na zeměpisné souřadnice.
• Places API: Automatické doplňování adres, vyhledávání míst a obohacení dat o firmy.
• Distance Matrix API: Výpočet vzdálenosti a doby cesty mezi body.
• Cloud Billing a omezení API klíčů: Nutné pro bezpečný a kontrolovaný provoz klíče.

Plánování: navrhněte logiku filtrování ještě před kódováním

Nejdůležitější část úspěšné integrace mapy je příprava před programováním. Určete, jaká data budete filtrovat, v jakém pořadí uživatel vybírá a co se po aplikaci filtrů na stránce změní. Například u kliniky to mohou být filtry podle města, specializace, lékaře, dostupnosti termínů a bezbariérového přístupu. U realitního portálu pak okres, cena, počet pokojů, typ nabídky a vzdálenost od uživatele. U restaurací zase rozvoz, parkování, otevírací doba a typ kuchyně.

Zachovejte jednoduchost. Ve většině projektů postačí 4-6 základních filtrů. Více než 10 filtrace uživatele zmátne a na mobilu zhorší použitelnost. Každý filtr by měl odpovídat jedné dobře definované databázové položce. Pokud například v kategorii někdo používá „kavárna“, „kafe“ i „coffee shop“, výsledky budou nepřesné. Standardizace dat je proto klíčová pro kvalitní filtrování.

Ukázkový datový model

Pro vyhledávač poboček by každá lokalita měla obsahovat minimálně: unikátní ID, název provozovny, zeměpisnou šířku a délku, město, okres, kategorii, telefon, adresu, otevírací dobu, stav aktivace a odkaz na detail. Pokročilejší scénáře mohou zahrnovat hodnocení, dostupnost zásob, druhy služeb, akční nabídky, fotografie a datum poslední aktualizace. Do 100 záznamů lze data spravovat i přes JSON soubor, větší projekty by měly používat databázi a API koncové body.

Srovnání: filtrování na straně klienta vs. serveru

Filtrování mapy lze implementovat dvěma způsoby. Klientské filtrování znamená, že všechna data se načtou do prohlížeče a filtrování probíhá lokálně. Serverové filtrování odesílá požadavek na server při každé změně filtru a server vrací pouze relevantní výsledky. Volba závisí na počtu lokalit, návštěvnosti a bezpečnostních požadavcích.

Praktická rada: pro firmu s 50 pobočkami stačí klientské filtrování, u realitního portálu s 500 nabídkami je vhodnější serverové filtrování a u platformy s 5 000 lokalitami se doporučuje hybridní přístup s využitím stránkování a clusterů.

Krok za krokem: nastavení vlastního filtrování pomocí Google Maps API

1. Vytvořte projekt v Google Cloud a API klíč

Prvním krokem je založení projektu v Google Cloud Console. Vyberte název, který jasně souvisí s vaším webem. Aktivujte potřebné služby, především Maps JavaScript API. Po vytvoření API klíče nezapomeňte nastavit omezení HTTP referrerů – klíč by měl fungovat pouze na vašich doménách (např. vasweb.cz a www.vasweb.cz). Bez tohoto omezení může být klíč zneužit na cizích stránkách, což znamená nepředvídané náklady.

Pro používání Google Maps Platform je nutné mít aktivovaný platební účet. To však neznamená automaticky vysoké výdaje – jde o sledování kvót a spotřeby. Nastavte si limity denních dotazů, upozornění e-mailem a rozpočet, abyste měli vše pod kontrolou. Při zakládání nového projektu zvažte také spolehlivou registraci domény a správu DNS: Hostragons služby registrace domén.

2. Připravte stabilní infrastrukturu pro stránku s mapou

Stránky s mapou bývají náročnější na výkon. Počet markerů, knihovna mapy, obrázky a API volání mohou zpomalit načítání. Ujistěte se, že hosting podporuje aktuální verze PHP, Node.js nebo frameworku, který používáte. Pokud provozujete WordPress, zkontrolujte zatížení tématu a pluginů. Vlastní řešení by mělo mít promyšlenou strategii cache pro API endpointy.

HTTPS je pro mapové aplikace nezbytné. Povolení přístupu k poloze uživatele, odesílání formulářů i volání API musí probíhat přes zabezpečené připojení. Weby bez SSL certifikátu mohou vyvolat varování v prohlížeči a některé funkce polohy nemusí fungovat správně. Vhodný certifikát vyberete na stránce Hostragons SSL certifikáty.

3. Standardizujte data o lokalitách

Kvalita filtrování závisí na přesnosti dat. Každá poloha musí mít přesné zeměpisné souřadnice. Spoléhat se jen na adresu vede k chybám v umístění markerů, zejména v městech s opakujícími se názvy ulic nebo čtvrtí. I u stovky záznamů mohou 3–5 špatných souřadnic výrazně snížit důvěru uživatelů.

Jednotně pojmenujte kategorie, používejte jednotný formát pro města a okresy, telefonní čísla zapisujte ve formátu s mezinárodním předvolbou a neaktivní lokality nezobrazujte. Sledujte také datum poslední aktualizace – pokud se otevírací doba změnila před osmi měsíci, mapa může být technicky funkční, ale uživatelský zážitek utrpí.

4. Synchronizujte markery, informační okna a seznam výsledků

Když uživatel klikne na marker, mělo by se objevit informační okno se základními údaji: název provozovny, adresa, telefon, stav otevření, odkaz na navigaci a tlačítko do detailu. Vedle nebo pod mapou by se zároveň měl aktualizovat seznam výsledků odpovídajících aktuálním filtrům. Synchronizace mapy a seznamu umožní rozhodnout se vizuálně i textově. Na mobilu je vhodné seznam umístit pod mapu pro lepší přehlednost.

Při velkém počtu markerů použijte cluster – seskupování blízkých bodů do jednoho symbolu, což zlepšuje přehlednost i výkon. Projekty s více než 300 markery by bez clusterů výrazně zpomalily stránku. U více než 1000 položek se doporučuje načítat data pouze z viditelné oblasti mapy.

5. Definujte jasná a měřitelná pravidla filtrování

Uživatel musí přesně vědět, jak filtry fungují. Například: bude možné vybrat více kategorií najednou, nebo jen jednu? Bude se vzdálenost počítat od aktuální polohy uživatele, nebo od zvoleného centra města? Budou se otevírací doby aktualizovat podle skutečného času, nebo podle statického údaje? Tyto volby ovlivní jak backend, tak uživatelské očekávání.

Pro výpočet vzdálenosti lze použít Haversinovu formuli (vzdušná vzdálenost), která je rychlá a levná, nebo Google Distance Matrix API, které vrací přesnou dobu jízdy. Pokud uživatel hledá nejbližší pohotovost, je lepší brát v potaz dobu jízdy; pro základní přehled o obchodech většinou stačí vzdušná vzdálenost.

6. Zaměřte se na mobilní uživatele

Většina lokálních vyhledávání probíhá na mobilních zařízeních. Proto by výška mapy, panel filtrů, dotykové plochy a uspořádání seznamu měly být navrženy s ohledem na malé obrazovky. Filtry je vhodné zobrazovat v rozbalovacím panelu nebo jako záložky pro lepší přehlednost. Důležité akce jako navigace, volání nebo chat přes WhatsApp by měly být přístupné jedním kliknutím.

Častou chybou je na mobilu zobrazit mapu téměř na celou obrazovku a filtry schovat. Uživatel ale chce nejdřív filtrovat a teprve potom vidět výsledky. Proto je třeba vhodně rozvrhnout mapu, filtry a seznam. Pokud uživatel nepovolí sdílení polohy, měla by být alternativa – manuální výběr města nebo okresu.

Optimalizace výkonu: rychlost, limity a uživatelská zkušenost

Výkon Google Maps API závisí nejen na rychlosti načítání, ale i na kvótách API, objemu dat a rychlosti interakce uživatele. Mapovou knihovnu načítejte pouze na stránkách, kde je skutečně potřeba. Pokud na homepage mapa není, nenačítejte API skript na celém webu. Data o lokalitách servírujte v komprimovaném JSON formátu a pro statická data používejte cache. To sníží zatížení serveru i dobu načítání stránky.

Dalším faktorem jsou obrázky v informačních oknech. Používejte formát WebP a optimalizujte velikost – místo 400 KB je ideální do 20 KB, zvlášť pokud zobrazujete více než 50 markerů. Pokud stránka s mapou přitahuje hodně návštěvníků z marketingových kampaní, vyplatí se investovat do škálovatelného hostingu: Hostragons řešení firemního hostingu.

• Načítejte Map API jen na vybraných stránkách.
• Při více než 300 markerech používejte clustering.
• Data podávejte komprimovaná (gzip, brotli).
• Serverové filtrování dělejte na indexované databázi.
• Nastavte rozpočtové a kvótové alarmy v Google Cloud.
• Na mobilu zpřístupněte filtraci rychle a přehledně.

Bezpečnost: chraňte API klíče a uživatelská data

API klíč v prohlížeči není tajný jako heslo – je viditelný uživateli. Bezpečnost proto spočívá v jeho správném omezení. Nastavte HTTP referrer omezení, povolte jen potřebné API služby, sledujte limity a nastavte upozornění při neobvyklém využití. Klíče používané na serveru ukládejte do prostředí, nikdy je neposílejte do klienta.

Uživatelská poloha je citlivý údaj. Vždy vysvětlete, proč ji potřebujete, a neukládejte ji bezdůvodně. Pokud je nutné ukládání, zajistěte souhlas uživatele, dodržujte zásady ochrany osobních údajů a dobu uchování dat podle GDPR. Pro zabezpečený web jsou nezbytné SSL certifikáty, pravidelné zálohy a aktuální software: Použití SSL pro bezpečnost webových stránek.

Jak nastavit stránky s filtrováním mapy z pohledu SEO?

Filtrování mapy zlepší uživatelský zážitek, ale samo o sobě není zárukou lepšího hodnocení ve vyhledávačích. Google nemusí vždy správně interpretovat informace ukryté v markerech na mapě. Proto je důležité mít důležité údaje o lokalitách dostupné i v textové podobě v HTML, nikoli jen v JavaScriptu. Název pobočky, adresa, telefon i otevírací doba by měly být čitelné pro vyhledávače.

Velkou výhodou je, když má každá pobočka vlastní detailní stránku s unikátní URL, popisem, adresou, navigačními instrukcemi a kontakty. Tyto stránky lze označit pomocí LocalBusiness nebo Organization schémat pro lepší lokalizaci ve vyhledávání. Hlavní stránka s filtrováním slouží spíše pro obecný přehled, detaily pak pomáhají vyhledávačům lépe porozumět podnikání. Toto řešení je ideální pro firmy s více pobočkami, které chtějí zvýšit organickou návštěvnost.

SEO kontrolní seznam

• Použijte na stránce s mapou relevantní H1, H2 a textový obsah.
• Nedávejte všechny informace jen do markerů, ale i do HTML.
• Vytvořte detailní stránky poboček nebo lokací.
• Udržujte URL čisté a srozumitelné.
• Testujte rychlost načítání podle Core Web Vitals.
• Implementujte správná lokální schémata ve struktuře dat.
• Přidejte mapovou stránku do XML sitemap.

Časté chyby a jak jim předejít

Nejčastější chybou je spoléhat se na hotové pluginy bez dostatečné kontroly kvality dat. Pluginy mohou být vhodné pro malé projekty, ale pokud potřebujete komplexní filtrování, vícenásobné kategorie, přesné výpočty vzdálenosti a vysoký výkon, často selhávají. Druhým častým problémem je neomezování API klíče před spuštěním, což může vést k nechtěným nákladům. Třetí chybou je nenačítat rychlost stránky a přetěžovat ji příliš mnoha markery, obrázky a skripty třetích stran.

Profesionální řešení vybíráte podle rozsahu projektu. Pro malé lokality do 20 záznamů stačí jednoduchý JSON soubor a klientská filtrací. U 2 000 a více míst je nezbytné použít databázové indexy, serverové filtrování, cache vrstvy a dotazování podle viditelnosti mapy. Na WordPressu lze využít vlastní typy obsahu a pole, v custom řešeních je ideální REST API nebo GraphQL pro flexibilitu.

Praktický příklad: servisní síť s 80 pobočkami

Představme si firmu s 80 servisními místy po celé ČR, která chce umožnit filtrování podle města, typu služby a aktuální otevírací doby. Pro každou pobočku připravíme data: název, město, okres, souřadnice, telefon, kategorie služeb a otevírací hodiny. Uživatel nejdříve vybere město, pak typ služby – seznam i mapa se synchronně aktualizují a zobrazí pouze relevantní markery.

V tomto rozsahu postačí klientské filtrování, protože 80 záznamů není pro prohlížeč problém. Otevírací doba vyžaduje řešení časových pásem a případných svátků. Při filtrování podle vzdálenosti se získá souhlas s polohou a výsledky se seřadí podle „vzdušné“ vzdálenosti. Výsledkové karty budou obsahovat odkazy na telefon, navigaci a detail. Takové řešení zlepší zákaznický servis a sníží zatížení call centra.

Údržba a měření: co dělat po nasazení?

Nasazení filtrování není konec práce. Je důležité sledovat využití Google Cloud, výkon v Search Console, chování uživatelů v Google Analytics a další metriky. Měřte kliknutí na navigaci, volání, použití filtrů a přechody na detaily. Tyto údaje pomohou zjistit, které oblasti jsou nejvyhledávanější, jaké filtry jsou nejoblíbenější a kde uživatelé narážejí na problémy.

Doporučuje se alespoň jednou měsíčně kontrolovat data – zavřené pobočky, změny kontaktů, aktualizace otevírací doby a nové služby by měly být rychle reflektovány v mapě. U rozsáhlejších projektů je ideální správa přes administrační rozhraní. Pokud náklady na API rostou nečekaně, prověřte nadbytečné dotazy, boty nebo nevhodné strategie načítání dat.

Závěr: rychlé a přehledné mapy přinášejí vyšší hodnotu

Vytvoření vlastního filtrování mapy pomocí Google Maps API není jen technickou výzvou, ale příležitostí výrazně zlepšit uživatelský zážitek a lokální konverze. Klíčem k úspěchu je správný výběr API, standardizace dat, jednoduchá logika filtrování, zaměření na mobilní uživatele, bezpečné omezení API klíčů a SEO optimalizace obsahů lokalit.

Pokud chcete své pobočky, prodejce nebo servisní místa na webu prezentovat přehledněji, začněte analýzou datové struktury a uživatelských scénářů. Poté systematicky vytvořte bezpečné, rychlé a škálovatelné řešení. Hostragons vám pomůže vybrat kvalitní hosting, domény i SSL certifikáty, abyste měli pevný základ pro své mapové projekty: Hostragons řešení webhostingu.

Často kladené otázky

Je filtrování mapy pomocí Google Maps API zpoplatněné?

Pro využití Google Maps Platform je potřeba mít aktivovaný platební účet a překročením určitých limitů může vzniknout poplatek. Cena závisí na typu API, počtu dotazů a nastavených kvótách. Nastavení rozpočtových alarmů a omezení API klíčů pomáhá kontroly nákladů.

Je WordPress vhodný pro filtrování mapy?

Ano, pro malé a střední projekty může WordPress postačovat. Pro rozsáhlejší databáze, vysoký provoz nebo složitější filtrování je ale lepší využít vlastní řešení s optimalizovanými databázovými dotazy a výkonným hostingem.

Jak bezpečně ochránit API klíč?

API klíč v prohlížeči nikdy nelze úplně skrýt. Proto je nutné nastavit HTTP referrer omezení, povolit jen potřebné API služby, sledovat limity a nastavit upozornění na neobvyklé využití. Serverové klíče ukládejte do prostředí a neposílejte je do klienta.

Od kolika markerů je vhodné použít clustering?

Obecně se clustering doporučuje od 300 markerů výše. Pro více než 1000 lokalit je vhodné kombinovat serverové filtrování a načítání pouze výsledků v aktuálním zobrazení mapy.

Přispívá filtrování mapy k lepšímu SEO?

Filtrování samo o sobě nezaručuje lepší pozice ve vyhledávačích, ale zlepšuje uživatelskou zkušenost a interakci, což nepřímo pomáhá. Pro SEO je důležité, aby údaje o lokalitách byly dostupné i v čitelné formě v HTML, včetně detailních stránek a správných strukturovaných dat.