Jak vložit mapový widget na jakýkoli web

Začněte v generátoru (jediná skutečná práce)

Všechno začíná v generátoru mapového widgetu. Geokódování proběhne jen jednou, právě tam — úryvek, který zkopírujete, nese fixní souřadnice. Výpadek geokodéru ani „normalizace adresy“ tak vaším špendlíkem už nikdy nepohnou. Napište adresu, sledujte, kam špendlík dopadne, a před kopírováním ho přetáhněte na svůj skutečný vchod: to desetisekundové přetažení dělá rozdíl mezi „správnou ulicí“ a „správnými dveřmi“.

Chcete si před stavbou té své prohlédnout hotové nastavení s více pobočkami? Otevřete ukázku generátoru — načte vzorovou firmu se třemi pobočkami, adresami, barevnými číslovanými špendlíky a panelem míst živě v náhledu, připravenou k prozkoumání.

WordPress: shortcode pluginu, nebo čistý iframe?

Oba postupy končí u identického widgetu — vyberte si podle chuti.

Cesta s pluginem (doporučeno): stáhněte whatismylocation-widget.zip → wp-admin ▸ Pluginy ▸ Instalace pluginů ▸ Nahrát plugin → Aktivovat. Pak přidejte blok Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Atributy odpovídají volbám v generátoru: theme, marker, zoom, height, directions a pro pobočky pins="lat,lng,Label~Address|…" s panel= a motion= (viz referenční tabulka níže). Sekce generátoru pro WordPress vám vytvoří celý shortcode — nic nemusíte psát.

Cesta bez pluginu: vložte iframe z generátoru do bloku Vlastní HTML. Stejný widget, žádný plugin k aktualizaci; cenou je delší kód v obsahu a žádné pozdější úpravy pomocí atributů.

Squarespace, Shopify, Notion — a ostatní

Mimo WordPress jde obvykle o jediné vložení: přidejte prvek HTML nebo vloženého obsahu své platformy (Wix Embed HTML, blok Code ve Squarespace, Embed ve Webflow) a vložte do něj iframe. Jeden rozdíl dělá mapový widget snazším než widget polohy: nepotřebuje atribut allow="geolocation", protože návštěvníky nikdy o nic nežádá — takže není co křehkého chránit, když editor stránek přepíše vaše HTML.

Squarespace: přidejte blok Code a vložte kód. Jeden háček je dobré znát dopředu: bloky Code vyžadují tarif Business nebo vyšší — v tarifu Personal blok zobrazí váš kód jako běžný text místo toho, aby ho vykreslil.

Shopify si zaslouží víc než jen vložení kódu: máme pro něj hotovou sekci šablony — jediný soubor v šabloně vám dá nativní panel nastavení, kde pobočky přetahujete jako bloky, bez aplikace a bez klíče API.

Notion a Google Sites vkládají přes URL, ne přes HTML. Úryvek s iframe vůbec nepřijmou — místo toho v generátoru stiskněte Kopírovat URL widgetu a vložte ji do bloku /embed v Notionu nebo do Embed ▸ By URL v Google Sites. Widget je plnohodnotná samostatná stránka, takže se v obou případech vykreslí bezvadně.

Salesforce Experience Cloud (veřejné komunitní weby): vložte iframe do komponenty HTML Editor — pak nechte správce přidat whatismylocation.ai v Setup ▸ Trusted URLs s direktivou CSP frame-src, jinak Salesforce rámec bez varování zablokuje. Týmy, které pracují s kódem, mohou stejnou URL zabalit do Lightning Web Component o asi 10 řádcích:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Více poboček: panel míst

Do jednoho vložení se vejde až 10 míst. V režimu Pokročilé v generátoru umístěte každý špendlík, dejte mu název a adresu a stiskněte Přidat místo. Návštěvníci dostanou panel míst — na počítači harmoniku vedle mapy, na telefonech listovatelný pás karet — s číslovanými špendlíky: výběr pobočky přeletí mapou k ní a zobrazí její adresu s vlastním odkazem na navigaci.

• panel= vybírá rozvržení: auto (výchozí — vedle mapy u širokých iframe, pás u úzkých), side, bottom nebo none pro pouhé špendlíky a bubliny.
• motion= nastavuje animaci přepnutí: smooth (výchozí přelet), fade, lively nebo none. Návštěvníci, kteří mají v systému zapnuté „omezení animací“, vždy dostanou okamžitou verzi, ať zvolíte cokoli.
• open=no začne se všemi položkami sbalenými; mapa se sama přizpůsobí všem pobočkám a váš zoom se stane maximem.

Přehled voleb

Řešení potíží ve WordPressu

Shortcode se na stránce zobrazuje jako text. Ten blok shortcody nezpracovává. V editoru bloků použijte blok Shortcode (nikoli blok s kódem nebo předformátovaným textem); v Elementoru jeho widget Shortcode, v Divi modul Code. Uživatelé klasického editoru: napište ho jako běžný text na kartě Vizuálně.

Nezobrazí se vůbec nic. Zobrazte zdrojový kód stránky a vyhledejte whatismylocation. Komentář HTML o chybějících lat/lng znamená, že souřadnice chybí nebo jsou neplatné — zkopírujte celý shortcode z generátoru, místo abyste atributy psali ručně.

Iframe po uložení zmizí (cesta bez pluginu). WordPress odstraňuje iframe u uživatelských rolí bez oprávnění unfiltered_html — na multisite to ve výchozím stavu zahrnuje i administrátory — a některé bezpečnostní pluginy dělají totéž. Čistým řešením je shortcode pluginu: nezávisí na tom, jestli vaše role smí ukládat čistý iframe.

Mapa je šedá / nenačítají se dlaždice. Dlaždice pocházejí z tile.openstreetmap.org; velmi agresivní blokovač reklam nebo firemní síť je může blokovat (překryvná karta se přitom vykreslí). Ověřte to v jiné síti nebo na telefonu s mobilními daty.

Chybí panel míst. Panel se objevuje od 2 špendlíků výš — jedno místo dostane klasickou překryvnou kartu. Zkontrolujte také, že není nastaveno panel="none".

Animace přepnutí se nepřehraje. Téměř vždy je to nastavení „omezení animací“ v operačním systému návštěvníka (nebo vašem) — widget ho záměrně respektuje a přepíná okamžitě. Není to chyba a ostatní návštěvníci vaši zvolenou předvolbu stále vidí.

Úpravy se neprojeví. Starou stránku servíruje cachovací plugin (nebo cache hostingu). Po úpravě atributů shortcode vyprázdněte cache stránky — samotný widget nemá co cachovat.