Ako pridať Google mapu na stránku

článok na blog uverejnený: 6. júla 2017

Žijeme v multimediálnej dobe. Máme mobilné telefóny, na ktorých prezeráme web stránky, pozeráme filmy či si púšťame obľúbenú muziku alebo sa necháme na 2 kliky navigovať na akékoľvek miesto na svete. Pomocou aplikácie Mapy. Čo si v tejto dobe pomyslíte o webe, respektíve jeho sekcii Kontakt, kde sa nachádza len „suchá“ adresa bez mapky? Veď kto už dnes pozná všetky ulice či sa pýta okolia „hej, neviete kde je tu Kominárska ulica?“. Mapka na webe proste nesmie chýbať. Ideálne interaktívna, ktorá sa dá posúvať a jedným klikom umožňuje návštevníkovi webu nechať sa k vám navigovať.
Poďme sa spoločne pozrieť na to, ako vložiť Google mapu do vašej web stránky.

 

Prečo práve Google mapy

Popravde – asi preto, že sú asi najrozšírenejšie. A prepojenie s webom je pri nich hračka. Klikačka na pár sekúnd, hoci určite to nie sú jediné bezplatné online mapy na svete.
Ak človek zbadá vizuál Google máp, spravidla hneď vie, že sa jedná o mapku. Je vysoká pravdepodobnosť, že ju bude vedieť používať, bude vedieť mapu zväčšiť, zmenšiť, nechať sa navigovať,… Google mapy sú rýchle, prehľadné, bezplatné a mnoho ľudí využíva možnosť odoslania polohy a navigácie priamo zo svojho smartfónu.
Ak by ste ale predsa len chceli byť iný – môžete použiť alternatívu. Systém a princíp je veľmi podobný, používateľská hodnota asi tiež. Len iná platforma.
Aktuálne možnosti: Nokia mapy – here.com, Waze mapy www.waze.com/sk/livemap alebo Bing mapy od Microsoftu www.bing.com/maps/

Prečo sú vlastne Google mapy zadarmo?

Zamysleli ste sa niekedy nad tým? Nič dobré nie je zadarmo. A tie služby od „Gúglu“ sú až podozrivo dobré a navyše zadarmo. Tak kde je problém? V čom je háčik?
Pre vás v ničom.
Google mapy sú naozaj úplne zadarmo, taktiež ich používanie na vašich web stránkach, aj v neobmedzenom počte. Ak si používateľ mapy prezerá alebo sa necháva nimi navigovať, spoločnosť Google tieto údaje ďalej spracúva a na základe nich predáva reklamu.

Nie, netreba mať strach, nebudete mať v mapách žiadnu reklamu ani blikajúci banner! Vy nie, ale používatelia, ktorí ich použijú. Pre vás to nič neznamená.
Google proste investuje milióny dolárov do vývoja máp a fotografovania ulíc a všetkým ich dáva zadarmo. Akurát sa trošku pozerá, kam ľudia klikajú, na aké stránky zvyknú chodiť a kam sa prepravujú práve teraz. To je všetko. 🙂

 

 

Vyberme si miesto na mape, ktoré chceme vložiť na náš web

Otvorme si Google mapy na web stránke google.com/maps a do vyhľadávacieho poľa napíšme požadované miesto alebo adresu. Ak nechcete písať, môžete sa na mapách trošku „pohrabať“ a adresu si nájsť takpovediac ručne. Proste – nájdite si len pomocou myši a približovania miesto a pohľad, ktorý chcete zdieľať na stránke. Samozrejme, platí to aj pre výber vhodného zoom-u, teda priblíženia mapy.
To, čo máme na monitore pred sebou, budeme používať ako interaktívnu mapu a vkladať na web, takže príprava je naozaj dôležitá.

Príklad: na obrázku hore je mapa s Kominárskou ulicou v Bratislave, ktorú sme našli pomocou vyhľadávača. Hľadať môžete však aj pomocou názvu firmy. Ak ste firma, ktorú Google trošku pozná, hľadajte radšej názov svojej firmy, pretože ten sa bude potom zobrazovať aj na mape – tak ako vidno na obrázku nižšie IT Learning Slovakia.

Miesto máme vybrané, poďme získať potrebný HTML kód

Na to, aby sme mohli vložiť mapu do webovej stránky, potrebujeme získať jej HTML kód. Hľadať budeme konkrétne HTML tag <iframe>, ktorý nám otvorí externé prostredie (mapu) priamo na našej webovej stránke.
Google nám po vyhľadaní a zobrazení firmy alebo ulice ponúka v ľavom poli vedľa mapy viacero funkcií. Ikonka „ZDIEĽAŤ“ nám svojím textom napovedá, že asi ona bude tá správna voľba. Po kliknutí na ňu sa v strede obrazovky otvorí malé okienko, kde máme možnosť vybrať si z dvoch „záložiek“ – Zdieľať odkaz alebo Vložiť mapu. Hypertextový odkaz zobrazený v políčku pod nimi slúži iba ako preklik priamo na stránku Google Maps, neumožní nám zobraziť mapu na našej stránke. Preto musíme zvoliť druhú alternatívu.

Po prekliknutí na záložku Vložiť mapu sa objaví naša želaná mapka a vyznačený odkaz, ktorý začína práve spomínaným HTML tagom <IFRAME….>. Vľavo od neho môžeme ešte zvoliť veľkosť zobrazenia mapy, prípadne doupraviť ťahaním myškou želané zobrazenie polohy firmy na mape. Následne klikneme na kód v okienku, vyznačíme ho (napr. Ctrl+A) a skopírujeme ho (napr. pomocou Ctrl+C alebo pravým klikom myši – v menu zvolíme Kopírovať).

Vkladáme mapu do HTML stránky

HTML kód sa aktuálne nachádza v našej pamäťovej schránke pre kopírovanie. Otvoríme kód stránky, kde potrebujeme mapu zobraziť a nájdeme zodpovedajúcu sekciu, v ktorej chceme mať mapu zobrazovanú. Následne kód mapy vložíme (napríklad pomocou Ctrl+V).

Pozrime sa bližšie na samotný kód, ktorý nám Google Maps ponúkol. Na obrázku dolu sa celý kód nachádza v okienku Poznámkový blok.
Za atribútom „SRC“ sa nachádza časť kódu označujúca, čo má príslušná mapa zobraziť. TENTO KÓD NIKDY NEMEŇTE! Zaujímavými atribútmi sú „width“, v tomto prípade šírka mapy a atribút „height“, čiže výška mapy. Ak potrebujete veľkosť mapy dodatočne upraviť, práve čísla v týchto atribútoch hovoria o jej veľkosti v pixeloch. V atribúte „style“ je vložený CSS kód, ktorý zabezpečuje, že mapa nebude mať žiadne orámovanie.

Vkladáme mapu do WordPressu

Pokiaľ používate CMS WordPress, budete vkladať kód do obsahu stránky, na ktorej chcete, aby sa mapa zobrazovala. V prípade, že váš WordPress nemá nainštalovaný žiadny modul pre vkladanie mapy, stačí tento kód vložiť v editore stránky.

V prípade tohoto článku kód mapy vkladáme na koniec tohoto textového odseku v zásuvnom module (plugine) WPBakeryPage Builder. Všimnite si vpravo hore vedľa „Vizuálny editor“, že vkladáme kód v záložke zobrazovania „Textový editor (HTML)“.
Nezabudnite, že kód musíte vložiť v móde textového editora (HTML). Vizuálny editor totiž zátvorky a úvodzovky prepíše do HTML značiek a mapa sa nebude zobrazovať(!). Namiesto nej uvidíte len vypísaný vložený kód mapy v podobe reťazca písmen a číslic v textovom obsahu stránky.

A plne funkčnú interaktívnu mapu Google máme na stránke. Výsledok vyzerá takto:

Bez znalosti HTML jazyka to nepôjde

HTML slúži na tvorbu statickej časti webu. Na to, aby sme umiestnili mapu do stránky tak, aby sa nachádzala presne tam, kde potrebujeme, je žiadúce ovládať značky (tagy) kódu. Vďaka nim dokážete upravovať voľne dostupné HTML šablóny, vytvárať si jednoduché vlastné stránky a sú veľmi nápomocné aj pri korekciách či tvorbe jednotlivých stránok v CMS WordPress.
Tento jazyk patrí medzi najľahšie a preto sa ho môže naučiť naozaj každý. Zdá sa vám to zložité? Naučte sa ho aj vy spoločne so základmi CSS v našom trojdňovom kurze.

autorom článku je: Peťo Hecht
Peťo je lektorom od vzniku našej spoločnosti, so špecializáciou na online marketing, reklamu, tvorbu webových stránok, WordPress, grafiku a AI - umelú inteligenciu. S viac ako 20-ročnými skúsenosťami a viac než 100 odprednášanými hodinami mesačne patrí medzi našich najskúsenejších lektorov. Ako marketingový riaditeľ a vedúci marketingového a personálneho oddelenia je zodpovedný za vizuálnu podobu našich webových stránok. Naša webová stránka je jeho dielom, ktoré dokonale odráža jeho odborné znalosti – od každého slova, cez obrázky, až po farebné schémy. Okrem toho Peťo navrhuje, programuje, kreslí a poskytuje konzultácie v oblasti online marketingu aj pre ďalšie spoločnosti. Na svojich kurzoch ochotne zdieľa praktické skúsenosti a know-how. Prednášal tiež vybrané marketingové témy na Fakulte manažmentu Univerzity Komenského.

Páčil sa vám článok? Pošleme vám podobné.
Aktivujte si okamžité zasielanie noviniek a článkov – už vám od nás nikdy nič neunikne. Môžeme vás okamžite informovať o aktuálnej akcii, novinke, špeciálnej kampani či zľave alebo novom článku na našom blogu. Akonáhle sa u nás v novinkách niečo zmení alebo pridá, do pár minút vám automaticky posielame email s odkazom na novinku na našu stránku. A odhlásiť sa môžete kedykoľvek. Nič neriskujete.


Nikam neodchádzajte, pozrite si naše novinky, akcie alebo si
prečítajte ďalšie podobné články:

Podobné články z kategórie
Google Mapy, html, tvorba web-stránok, web stránky, WordPress


Aktuálna akcia na IT kurzy a počítačové a marketingové kurzy v Bratislave