Jak vytvořit interaktivní mapu pro web

Běžná vložená mapa ukazuje značku. Ta však nepomůže hostovi najít boční vchod, návštěvníkovi cestu od nádraží ani zákazníkovi zjistit, kam rozvážíte. Draw on a Map umožňuje nejprve tyto podrobnosti nakreslit a poté vložit hotovou mapu na web. Klíč API ani účet nepotřebujete.

Vytvořte mapu a zkopírujte kód pro vložení

Pokud má web zobrazovat pozdější úpravy, před kopírováním kódu uložte mapu do účtu. Kód z neuložené mapy vytvoří neměnnou kopii.

1. Otevřete Draw on a Map a vyhledejte místo.
2. Nakreslete trasu, oblast, šipky nebo poznámky.
3. Přibližte a posuňte mapu na pohled, který mají návštěvníci vidět jako první. Vložená mapa se otevře v tomto pohledu.
4. Na horním panelu nástrojů vyberte Vložit na web (</>).
5. Vyberte, kam kód vložíte: HTML, WordPress, Wix nebo Squarespace. Dialog ukáže postup pro danou platformu.
6. Nastavte výšku a vyberte Kopírovat kód.
7. Vložte kód na stránku, publikujte ji a zkontrolujte na počítači i telefonu.

Ve WordPress vložte kód do bloku Vlastní HTML. Ve Wix přidejte Embed Code → Embed HTML. V Squarespace přidejte blok Code nastavený na HTML.

Jak kód vypadá

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map embed"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

Jde o šablonu. Skutečný kód zkopírujte z dialogu Vložit na web, který doplní src vaší mapy. Šířka se přizpůsobí sloupci, ve kterém mapa je. Pokud potřebujete vyšší nebo nižší mapu, změňte height.

Bezplatné vložené mapy zobrazují „Powered by Draw on a Map“. Pro odstranění označení mapu uložte a přejděte na Pro.

Udržujte vloženou mapu aktuální

Před kopírováním kódu uložte mapu do účtu. Vložená mapa pak ukazuje poslední uloženou verzi, takže můžete opravit trasu nebo přesunout značku bez změny webu.

Kód z neuložené mapy uchovává kresbu v adrese URL. Při úpravě mapy se nemění. Po úpravě znovu otevřete Vložit na web, zkopírujte nový kód a nahraďte starý iframe.

Velké importované datové sady se do adresy URL nevejdou. Pokud vás dialog vyzve k uložení, uložte mapu a znovu otevřete Vložit na web.

Pokud se mapa nezobrazuje

Použijte blok, který přijímá HTML nebo kód iframe. Pole pouze pro webovou adresu nebude s celým iframe fungovat. Pokud mapa po publikování zmizí, může váš editor webu iframe odstraňovat. Zkontrolujte jeho nastavení vloženého obsahu.

Nápady pro mapy na webu

• Akce a svatby: označte správný vchod, zastávku kyvadlové dopravy a parkování na jedné mapě.
• Pronájmy a cestování: nakreslete pěší cestu od nádraží k bytu nebo zkratku na pláž.
• Poskytovatelé služeb: nakreslete oblast, kterou obsluhujete. Pokud návštěvníci potřebují ověřit vlastní adresu, placený widget oblasti obsluhy tuto hranici promění v ověření adresy pro váš web.

Vytvořit mapu pro web

Související návody

• Kruh na mapě: označte oblast rozvozu nebo obsluhy přesným poloměrem
• Kreslení do Map Google: přesuňte stávající mapu z Google My Maps před vložením na web
• Sdílení vlastních pěších tras: nakreslete trasu, kterou navigace určuje špatně