Ako vytvoriť interaktívnu Google mapu s vlastnými špendlíkmi?

Mapa s vlastnými špendlíkmi

K jedným z najpopulárnejších článkov na našej platforme Wpromotions.eu jednoznačne patrí Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)? Dočítate sa v ňom ako vytvoriť jednoduchú mapu s vlastnými bodmi pomocou Google My Maps. V dnešnom článku si ukážeme alternatívu od spoločnosti Elfsight. „Google Maps Widget“ ponúka možnosť vytvoriť responzívnu a interaktívnu mapu s moderným a pútavým dizajnom. Hlavnou výhodou Elfsight je možnosť širokého využitia všetkých widgetov/funkcií v rôznych online editoroch (Webnode, Weebly, WordPress…).

Interaktívna Google mapa od Elfsight Vám umožní zobraziť vlastné body/miesta na mape spolu so základnými údajmi pre každý bod (adresa, webová stránka, telefón, e-mail, otváracie hodiny, krátky popis i obrázok). Obrovskou výhodou je možnosť kategorizovať body na mape, čím môžete pomôcť návštevníkom stránky s vyhľadávaním. Filter na základe kategórie zobrazí iba tie body, ktoré sú súčasťou vybranej kategórie. Široká miera personalizácie Vám pomôže vytvoriť prehľadnú mapu aj v prípade, že vlastných bodov/špendlíkov máte viacero.

Poďme nato!

Interaktívna mapa „Google Maps Widget“ – zdarma VS premium

Interaktívna mapa s vlastnými bodmi/špendlíkmi, ktorú si ukážeme v tomto návode je zdarma. Externá služba Elfsight ponúka vo svojej bezplatnej verzii (LITE) možnosť vytvoriť si 1 widget zadarmo.

V prípade potreby ďalšieho widgetu, je nutné zakúpiť si jeden z Prémiových tarifov, ktorý táto služba ponúka.

Cena začína už na 6 USD / mesiac. Pravdaže, často natrafíte na rôzne akcie, čím sa náklady za službu znížia.

Interaktívna mapa s vlastnými špendlíkmi – šablóny

Externá služba Elfsight momentálne ponúka na výber 8 šablón pre tvorbu mapy s vlastnými bodmi/špendlíkmi. Všetky šablóny ponúkajú širokú mieru úprav a personalizácie.

Elfsight šablóny sú responzívne, teda sa prispôsobia zariadeniu (počítač, tablet, mobil), moderné a užívateľsky prívetivé.

Úprava šablóny v editore od Elfsight nie je dostupná v slovenskom ani v českom jazyku.

Ako vytvoriť interaktívnu Google mapu s vlastnými špendlíkmi?

1. Prejdite na oficiálne stránky https://elfsight.com/, otvorte tab Widgets a vyberte možnosť Google Maps.

2. Vyberte si jednu z 8 dostupných šablón a kliknite na tlačidlo Continue with this template.

3. V prvom kroku, pod sekciou Content – Locations, môžete pridať nový bod na mape, a to kliknutím na Add Location. Pri tvorbe nového bodu zadávate adresu/súradnice, názov, popis či ikonu. V prípade, že ste s novým bodom na mape spokojný, potvrďte úpravy kliknutím na Done v pravom hornom rohu. 

Kontaktné údaje ako je adresa, e-mail, telefón, webová adresa či obrázok a popis zmeníte pod Description.

K úprave existujúceho bodu na mape sa dostanete kliknutím na tri bodky a Edit. 

4. V prípade, že chcete pri niektorom z existujúcich bodov na mape zmeniť ikonu, musíte si túto ikonu najprv vytvoriť/pridať cez Content – Icons. Kliknite na tlačidlo Add Icon, pomenujte ikonu a vyberte si jednu z dostupných ikon či nahrajte vlastnú ikonu priamo z počítaču. Elfsight Vám dovoľuje zmeniť veľkosť ako aj farbu Vami vybranej ikony.

Akonáhle je Vaša nová ikona vytvorená, môžete ju nastaviť pre daný bod na mape cez Content – Locations – tri bodky – Edit – Icon.

5. Veľkou výhodou Google Maps widgetu od Elfsight je možnosť radiť body na mape do rôznych kategórií. Predtým ako bod zaradíte do kategórie, musíte si kategóriu najprv vytvoriť a to cez Content – Categories.

Zvoľte možnosť Enable Categories a kliknite na Add Category.

Pomenujte novú kategóriu a vyberte korešpondujúcu ikonu. Potvrďte kliknutím na Done. 

Akonáhle je Vaša nová kategória vytvorená, môžete ju nastaviť pre daný bod na mape cez Content – Locations – tri bodky – Edit – Category.

6. Sekcia Map Vám ponúka možnosť nastaviť zobrazenie samotnej mapy. Hneď na začiatok pod Map Type môžete vybrať, či sa daná mapa bude zobrazovať ako mapa ciest, satelitná mapa, hybridná či terénna mapa. 

Pod Localization doporučujem nastaviť Váš jazyk a prepnúť míle na kilometre.

Pod Centre&Zoom odporúčam nastaviť Centre aj Zoom na hodnotu auto. Mapa automaticky posunie stred a nastaví zoom (teda priblíženie) na najlepšie miesto na mape, tak, aby boli viditeľné všetky (respektíve väčšina) body na mape.

7. Pod sekciou Panel môžete zapnúť možnosť zobrazovania sa výpisu bodov/miest na mape – Display Locations Panel. Automaticky sa zaktívni aj nastavenie Expand Panel by Default, ktoré zobrazí výpis bodov/miest vždy automaticky. Toto nastavenie odporúčame nechať aktívne, a tým si byť istý, že návštevníci Vašej webovej stránky výpis a jeho detaily určite neprehliadnu.

Ktoré detaily bude výpis zobrazovať môžete nastaviť pod Panel – List.

8. V prípade, že ste s úpravami hotový, kliknite na Add to website for free.

Služba Vás vyzve o prihlásenie. Môžete využiť svoj existujúci Google alebo Facebook účet, či sa prihlásiť pomocou e-mailu.

9. Pre úspešné dokončenie a používanie Google Maps widget musíte zadať Váš Google Maps API kľúč. V prípade, že Google Mpas API kľúč nemáte, kliknite na tlačidlo Create API Key, a pokračujte ďalej ma základe nášho článku Ako vytvoriť Google Maps API Key? 

V prípade, že Váš Google Maps API kľúč máte, prilepte ho na požadované miesto a potvrďte Apply.

10. Kliknite na tlačidlo Publish v pravom hornom rohu a skopírujte si potrebný HTML kód pomocou Copy Code.

11. Prihláste sa do editácie webu vo Webnode a vložte kód podľa toho, aké služby máte vo Webnode zakúpené:

12. Hotovo – po vložení kódu už len publikujte zmeny tlačidlom Publikovať v hornej lište. Vašu interaktívnu mapu so špendlíkmi od Elfsight uvidíte v publikovanej verzii Vašej webovej stránky.

Pár slov na záver

Vytvorenie interaktívnej mapy s vlastnými špendlíkmi zvládne každý! Vďaka responzívnemu Google Maps Widget od Elfsight môžete efektívne pridať vlastné body, kategórie a prispôsobiť mapu podľa Vašich potrieb. Navyše, mapa môže obsahovať aj výpis všetkých bodov, čo umožní návštevníkom jednoduchšie vyhľadávanie a orientáciu.

Jedinou dodatočnou požiadavkou pre plnohodnotné využitie widgetu je vytvorenie Google API kľúča. Hoci to môže na prvý pohľad pôsobiť ako krok navyše, ide o jednoduchý proces, ktorý zabezpečí správne fungovanie Vašej mapy. Ak si s tým neviete rady, pripravili sme pre vás podrobný návod, ako si Google API kľúč vytvoriť, ktorý Vám celý proces uľahčí.

Táto funkcionalita je skvelým riešením nielen pre firmy, e-shopy, blogerov a cestovateľov, ale aj pre realitné kancelárie, organizátorov podujatí, reštaurácie, hotely, turistické informačné centrá či lokálne podniky, ktoré chcú svojim zákazníkom ponúknuť prehľadné a vizuálne atraktívne umiestnenie prevádzok, pobočiek alebo zaujímavých lokalít.

Google mapa s vlastnými špendlíkmi – Časté otázky (FAQ)

Je možné body/miesta na mapu importovať?

Áno. Google Maps widget od Elfsight Vám dovoľuje importovať body na mapu pomocou CSV súboru. Otvorte Content – Locations a kliknite na tri bodky.  Vyberte možnosť Import from CSV a importujte Vaše body/miesta na mapu.

Ako zmeniť poradie bodov/miest na mape či výpise?

V prípade, že chcete zmeniť poradie bodov/miest na mape, čo sa prejaví hlavne vo výpise, stačí jednoducho kliknúť na tri čiary na ľavej strane bodu/miesta a potiahnuť na požadované miesto, tzv. Drag&Drop (Chyť a Pusť). 

Trasa sa automaticky zobrazuje priamo na mojej mape. Ako zmením zobrazenie trasy na novú kartu/zobrazenie priamo na Google Maps? 

V prípade, že chcete, aby sa trasa zobrazovala pod novou kartou priamo na stránkach Google Maps, otvorte sekciu Map – Directions. Kliknite na In a New Tab, a trasa sa bude zobrazovať na novej karte Google Maps. Možnosť On the Map zobrazí trasu priamo na Vašej mape.

Ako zmením text v políčku na vyhľadávanie z anglického Search?

Pre zmenu textu v políčku na vyhľadávanie, otvorte sekciu Panel – Search. Napíšte želaný text pod políčko Custom Search Placeholder a uložte.  

Potrebujem mať technické znalosti, aby som si na web pridal widget od Elfsight?

Nie, technické znalosti vôbec nepotrebujete. Prečítajte si tento návod a určite to zvládnete! Držíme palce!

Musím zadávať číslo platobnej karty?

Nie – služba Elfsight nepožaduje vyplnenie platobnej karty pri použití verzii Zdarma (LITE).

Ďalšie skvelé návody