Mapy sú základným aspektom akejkoľvek webovej stránky firmy. Aj keď ste úplne na internete, zákazníci stále radi vedeli, kto ste a kde žijete. Mapy Google sú teraz predvolené pre mnohé webové stránky, pretože sa najjednoduchšie používajú, zdanlivo najpresnejšie a sú zadarmo. Na konci tohto tutoriálu budete presne vedieť, ako vložiť responzívnu mapu Google na svoj web.
Predvolené Mapy Google nie vždy reagujú, takže sa nemusia škálovať na rôzne veľkosti obrazovky. V závislosti od toho, či používate doplnok WordPress alebo ho vkladáte sami pomocou kódu, môže byť potrebné pridať niekoľko riadkov CSS, aby mapa reagovala.
Citlivý webdizajn
Kľúčovým výrazom je tu responzívny. Opisuje webový dizajn, ktorý zohľadňuje používateľskú skúsenosť a zariadenie, aby sa zabezpečilo, že je rovnaký bez ohľadu na to, aké zariadenie používate na prístup k webovej stránke. Napríklad responzívny web by mal poskytovať rovnakú kvalitu zážitku, či už ho navštívite na počítači, tablete alebo smartfóne.
Aby to bolo možné urobiť, musí sa web prispôsobiť rôznym rozlíšeniam, veľkostiam obrazovky a dotykom.
Vloženie responzívnej mapy Google na web
Existujú tri spôsoby, ako viem, ako vložiť Mapy Google na web. Ak používate tému WordPress, môže mať zabudovanú funkciu. Môžete tiež použiť doplnok alebo vložiť kód priamo z Google na ľubovoľnú webovú stránku. Prvá a druhá voľba sú skvelé pre používateľov WordPress, iné CMS používajú aj doplnky, takže ste tu pokrytí. Posledná možnosť, pomocou kódu, by mala fungovať na väčšine webových stránok bez ohľadu na to, ako sú vytvorené.
Použite tému WordPress na vloženie responzívnej mapy Google
Niektoré témy WordPress budú mať funkciu špeciálne pre Mapy Google. Keďže mapy sú pre moderné webové stránky také zásadné, niektorí návrhári tém ich implementovali priamo do svojich návrhov. Ak má váš motív funkciu mapy, bude pravdepodobne potrebné rozhranie API služby Mapy Google, aby bola funkčná. Rozhranie API pridáte do možností témy a pri každej návšteve bude hovoriť priamo so spoločnosťou Google, aby vytvoril mapu.
- Navštívte túto stránku na webe Google a začnite proces API.
- Vyberte modré tlačidlo Začíname.
- V ľavej hornej časti novej obrazovky vyberte ikonu ponuky s tromi riadkami.
- Vyberte API a služby a potom poverenia.
- Vyberte možnosť Vytvoriť poverenia a potom kľúč API.
- Vyberte položku Obmedziť kľúč a vyberte sprostredkovateľov protokolu HTTP.
- Vyberte možnosť Uložiť.
- Skopírujte kľúč API a vložte ho na stránku možností návrhu, ktorá to vyžaduje.
Akonáhle budete mať kľúč API, môžete implementovať Mapu Google na svoj web pomocou nástrojov na návrh motívov. Pokiaľ je téma citlivá, mala by byť aj mapa.
Použite doplnok na vloženie responzívnej mapy Google
WordPress používa doplnky, Joomla používa rozšírenia, Drupal používa moduly alebo pluginy a iné CMS používajú podobné konvencie pomenovávania. Či tak alebo onak, pluginy sa týkajú modulárnych prvkov, ktoré môžete priskrutkovať k svojmu jadru CMS a pridať funkcie. Jednou z užitočných funkcií je mapa Google. Ak téma vašej webovej stránky neobsahuje prvok máp a vy sami nechcete robiť kód sami, ďalší najlepší je doplnok.
- Vo WordPress prejdite na Doplnky a Pridať nový.
- Vyhľadajte Mapy Google a vyberte doplnok, ktorý sa vám páči.
- Povoľte ho v Doplnkoch a prejdite na jeho Nastavenia.
- Pridajte rozhranie Mapy Google, ktoré ste vytvorili vyššie, kde je to uvedené, a uložte.
- Implementujte doplnok kdekoľvek chcete, aby sa mapa zobrazila.
Ostatné CMS sa mierne líšia v názvoch a pozíciách menu, ale princíp je takmer rovnaký. Väčšina doplnkov máp, ak nie všetky, bude vyžadovať fungovanie rozhrania Google Maps API.
Použite kód na vloženie responzívnej mapy Google
Ak nepoužívate WordPress alebo iný CMS, môžete stále vložiť responzívnu mapu Google. Stačí použiť kód namiesto modulu. Trvá trochu viac práce, ale prinesie rovnaké citlivé mapy.
- Navštívte Mapy Google a navigujte, kým mapa, ktorú chcete zobraziť, nevyplní celú obrazovku.
- Vyberte modrý odkaz Zdieľať a skopírujte kód z Vkladacej mapy.
- Pridajte svoj špecifický kód na vloženie do nižšie uvedeného kódu medzi a.
- Pridajte kód do kódu HTML svojej webovej stránky, na ktorom chcete vidieť mapu.
- Uložte svoje zmeny.
Kód:
Toto nie je môj kód, našiel som ho online, ale otestoval som ho na svojej webovej stránke. Funguje to ako kúzlo a malo by fungovať bez ohľadu na to, či používate CMS, HTML, Hugo alebo jeden z mnohých ďalších jazykov webových stránok alebo nástrojov stránok.
