Mapy jsou základním aspektem každé obchodní webové stránky. I když jste zcela na internetu, zákazníci stále rádi vědí, kdo jste a kde žijete. Mapy Google jsou nyní pro mnoho webů výchozí, protože je nejjednodušší, zdánlivě nejpřesnější a zdarma. Na konci tohoto tutoriálu budete přesně vědět, jak na svůj web vložit citlivou mapu Google.
Výchozí Mapy Google nejsou vždy citlivé, takže se nemusí škálovat na různé velikosti obrazovky. V závislosti na tom, zda používáte plugin WordPress nebo jej vkládáte sami pomocí kódu, může být nutné přidat několik řádků CSS, aby mapa reagovala.
Citlivý webdesign
Klíčovým termínem je zde responzivní. Popisuje webový design, který zohledňuje uživatelský dojem a zařízení, aby zajistil, že je stejný bez ohledu na to, jaké zařízení používáte k přístupu na web. Například responzivní web by měl poskytovat stejnou kvalitu zážitku, ať už je navštívíte na ploše, tabletu nebo smartphonu.
Aby to bylo možné, musí se web přizpůsobit různým rozlišením, velikostem obrazovky a dotyku.
Vložení citlivé mapy Google na web
Mapy Google lze vložit na web třemi způsoby. Pokud používáte téma WordPress, může mít tuto funkci vestavěnou. Můžete také použít plugin nebo vložit kód přímo z Googlu na jakýkoli web. První a druhá možnost jsou skvělé pro uživatele WordPress, ostatní CMS používají pluginy také, takže jste tam pokrytí. Poslední možnost, pomocí kódu, by měla fungovat na většině webových stránek bez ohledu na to, jak jsou vytvořeny.
Použijte motiv WordPress k vložení citlivé mapy Google
Některá témata WordPress budou mít funkci specificky pro Mapy Google. Protože mapy jsou pro moderní webové stránky tak zásadní, někteří návrháři témat je implementovali přímo do svých návrhů. Pokud má vaše motivu funkci mapy, bude pravděpodobně potřeba rozhraní Google Maps API, aby bylo funkční. Do možností motivů přidáte rozhraní API a při každé návštěvě bude hovořit přímo s Googlem o vytvoření mapy.
- Chcete-li zahájit proces API, navštivte tuto stránku na webu Google.
- Vyberte modré tlačítko Začínáme.
- V levé horní části nové obrazovky vyberte ikonu nabídky se třemi řádky.
- Vyberte API a služby a poté pověření.
- Vyberte Vytvořit pověření a poté API klíč.
- Vyberte Omezit klíč a vyberte HTTP Referrers.
- Vyberte Uložit.
- Zkopírujte klíč API a vložte jej na stránku možností návrhu, která to vyžaduje.
Jakmile budete mít klíč API, můžete implementovat Mapu Google na svůj web pomocí nástrojů pro návrh motivů. Dokud téma reaguje, měla by být i mapa.
Pomocí pluginu můžete vložit responzivní Mapu Google
WordPress používá pluginy, Joomla používá rozšíření, Drupal používá moduly nebo pluginy a další CMS používají podobné konvence pojmenování. V obou případech se pluginy týkají modulárních prvků, které můžete přišroubovat na svůj základní CMS a přidat funkce. Jednou z užitečných funkcí je mapa Google. Pokud motiv vašeho webu neobsahuje prvek mapy a vy sami nechcete kód dělat sami, je další nejlepší věcí plugin.
- Ve WordPress přejděte na Pluginy a Přidat nový.
- Vyhledejte Mapy Google a vyberte plugin, který se vám líbí.
- Povolte jej v zásuvných modulech a přejděte do jeho Nastavení.
- Přidejte výše uvedené rozhraní Google Maps API, které jste vytvořili výše, a Uložit.
- Implementujte plugin kdekoli chcete, aby se mapa zobrazila.
Ostatní CMS se mírně liší v názvech a pozicích menu, ale princip je téměř stejný. Většina, pokud ne všechny, mapové doplňky vyžadují fungování rozhraní Google Maps API.
Pomocí kódu vložíte responzivní Mapu Google
Pokud nepoužíváte WordPress nebo jiný CMS, můžete stále vložit responzivní Google Map. Stačí použít kód místo modulu. Zabere to trochu více práce, ale dodá stejné citlivé mapy.
- Navštivte Mapy Google a navigujte, dokud mapa, kterou chcete zobrazit, nevyplní obrazovku.
- Vyberte modrý odkaz Sdílet a zkopírujte kód z Vložené mapy.
- Přidejte svůj specifický kód pro vložení do níže uvedeného kódu mezi a.
- Přidejte kód do HTML své webové stránky, kde chcete zobrazit mapu.
- Uložte změny.
Kód:
Toto není můj kód, našel jsem ho online, ale vyzkoušel ho na mém webu. Funguje to jako kouzlo a mělo by fungovat, ať už používáte CMS, HTML, Hugo nebo jeden z mnoha dalších jazyků webových stránek nebo nástrojů stránky.
