Webnode: Ako vložiť vlastnú mapu Google

08.09.2022

Tento návod využi, ak sa ti prvok MAPA v editore Webnode nepozdáva. Funkcia Mapa má totiž oproti originálnemu widgetu obmedzené možnosti nastavenia.

1. Na stránkach Google Maps nájdi správnu adresu. Potom klikni na možnosť Zdieľať (1). V otvorenom okne vyber možnosť Vloženie mapy (2) a skopíruj kód (3).

Kód je bezpečne uložený v schránke. A odtiaľ ho môžeš skopírovať priamo na projekt Webnode - presne na miesto, kam chceš mapu vložiť. 

2. Zobraz malé čierne plus naľavo a klikni na prvok HTML.

3. Do okna vlož kód a zmeny ulož a publikuj.

Výsledok:

Ako môžeš vidieť, mapa nie je responzívna - jej veľkosť sa neprispôsobuje veľkosti okna. To sa dá jednoducho vyriešiť ďalším kódom.

4. Získaný kód obaľ do tagov pre odstavec div s triedou nazvanou map-responsive

Otvor HTML okno s kódom a pridaj na začiatok pred kód tento tag:

<div class="map-responsive">

A na konci uzavri odstavec takto:

</div>

Takto:

5. Nakoniec na stránky vlož CSS kód, ktorý zabezpečí, že sa mapa prispôsobí veľkosti okna.

Ak máš projekt vo verzii Limited alebo Mini, kód vlož do HTML hlavičky stránky, na ktorej je mapa. Tú nájdeš v okne Stránky pod SEO nastaveniami.

Vyššie balíčky umožňujú vložiť kód do globálnych nastavení webu. Takto sa bude kód uplatňovať automaticky na všetky mapy na webe.

<style>

.map-responsive{

overflow:hidden;

padding-bottom:56.25%;

position:relative;

height:0;

}

.map-responsive iframe{

left:0;

top:0;

height:100%;

width:100%;

position:absolute;

}

</style>

6. Zmeny publikuj.

Výsledok:

Lepšie, nie?

Najnovšie články o Webnode

Návody pre lepší a krajší web

Vo Webnode je možné vybrať jednu zo systémovo predvolených farieb, ktorá sa bude zobrazovať napríklad v menu, v zoznamoch, nadpisoch a ďalších grafických prvkoch. Ale tento výber je veľmi obmedzený a je veľmi nepravdepodobné, že v ňom nájdete presne ten odtieň, ktorý vám odporučil grafik v manuále značky. Vďaka kódom ho však môžete nastaviť...

Tento návod sa hodí, ak chceš akúkoľvek záložku z menu presmerovať mimo svoj web. Napr. na inú tvoju stránku/e-shop, do inej služby, kde máš profil (Instagram, Facebook) a podobne.

V pôvodnom oranžovom editore Webnode fungovali tzv. katalógy. Niektorým pamätníkom chýbajú, preto som pripravila tento článok s postupom, ako si katalóg vytvoriť aj v aktuálnej verzii Webnode 2.0.