0 Kč s DPH

Vložení responzivní mapy

Vedle kontaktních údajů bývá dnes zvykem zobrazit také mapu. A pokud ji chcete zobrazovat na responzivní šabloně, měla by být také responzivní. V následujícím návodu si ukážeme, jak vložit responzivní mapu ze dvou u nás nejpoužívanějších mapových portálů: z map Google a Seznam.

Mapu přidáváme do stránky. Můžete vytvořit stránku pouze s mapou a tu pak zobrazit v některém z prvků ve Struktura → Nastavení prvků, nebo můžete mapu vložit již k nějakému obsahu. Bližší informace o zobrazování prvků ve struktuře webu naleznete zde: Práce s prvky webu – Vložení boxů a aktivních rubrik (admin2)

Kód mapy vkládáme jako HTML. Nad textovým editorem stránky se nachází řada ikonek, z nichž ikonka s názvem Zdrojový kód (ikona  ) slouží pro editaci zdrojového kódu. Kliknutím na ni zobrazíte HTML editor obsahu stránky.

Mapy Google

Na webových stránkách maps.google.com vyhledáme adresu, kterou chceme na mapě zobrazit. V levém menu klikneme na tlačítko Sdílet:

V nově otevřeném okně se dvěma záložkami vybereme záložku Vložení mapy a zkopírujeme označený kód:

Tento kód pak vložíme jako HTML do stránky, kde chceme mapu zobrazit, a upravíme velikost. Aby mapa byla responzivní, musí být hodnota šířky uvedena v procentech. Pro zobrazení v plné šíři tedy použijeme width="100%". Výšku již nastavte dle svého uvážení (bez procent!).

Velikosti jsou v kódu uvedeny na konci:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2607.6854003438552!2d16.603152915631266!3d49.187556079321155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471294549895a2e3%3A0x6deb4b6832f9ef82!2sZONER+software!5e0!3m2!1scs!2scz!4v1480592919800" width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>

width = šířka
height = výška

Velikost mapy si vždy zkontrolujte přímo na vašem webu, v editoru se procentuální šířka neprojeví. Pro náhled klikněte na miniaturu vpravo:

Mapy Seznam

Na webových stránkách mapy.cz vyhledáme adresu, kterou chceme na mapě zobrazit. V pravé dolní části mapy klikneme na tlačítko Nástroje:

Tlačítko nám zobrazí nabídku, ve které vybereme položku Vložit mapu do vlastních stránek a zkopírujeme vygenerovaný kód:

Dále postupujeme stejně jako u Google map. Kód vložíme jako HTML do stránky, kde chceme mapu zobrazit, a upravíme velikost. Aby mapa byla responzivní, musí být hodnota šířky uvedena v procentech. Pro zobrazení v plné šíři tedy použijeme width="100%". Výšku již nastavte dle svého uvážení (bez procent!).

I zde jsou velikosti mapy uvedeny na konci:

<iframe src="//api.mapy.cz/frame?params=%7B%22x%22%3A16.605263208310628%2C%22y%22%3A49.187601673692235%2C%22base%22%3A%221%22%2C%22layers%22%3A%5B%5D%2C%22zoom%22%3A17%2C%22url%22%3A%22https%3A%2F%2Fmapy.cz%2Fs%2F1ftcs%22%2C%22mark%22%3A%7B%22x%22%3A%2216.605263208310628%22%2C%22y%22%3A%2249.187601673692235%22%2C%22title%22%3A%22ZONER%20software%2C%20a.s.%22%7D%2C%22overview%22%3Atrue%7D&amp;width=400&amp;height=280&amp;lang=cs" width="100%" height="150" style="border:none" frameBorder="0"></iframe>

width = šířka
height = výška

Medard Hüttenbach
Web developer
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • vložení mapy Google

    14.1.2017 10:26:00 | Radek Trnka

    Dobrý den
    při vložení ať na samostatnou stránku, nebo přidáním na existující , je zobrazeno, že vydavatel obsahu nedovoluje zobrazení v rámci. Je pak přiložen proklik, kde je možné stránku otevřít v samostatném okně.
    Děkuji za informaci kde dělám chybu
    Hezký den
    Radek Trnka

    Odpovědět

  • mapy Seznam nenačítají

    14.11.2017 18:13:30 | Jan

    Dobrý den, když vložím mapu Google, vše je bez problému. Ovšem já potřebuji turistickou mapu Seznam a ...stránka nenalezena.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.