Jak osadzić widżet mapy na dowolnej stronie

Zacznij w kreatorze (to cała robota)

Wszystko zaczyna się w kreatorze osadzania mapy. Geokodowanie odbywa się raz, właśnie tam — skopiowany fragment kodu nosi w sobie stałe współrzędne, więc awaria geokodera ani „normalizacja adresu” nie przesuną później Twojej pinezki. Wpisz adres, zobacz, gdzie ląduje pinezka, a przed skopiowaniem przeciągnij ją na swoje rzeczywiste wejście: te dziesięć sekund przeciągania to różnica między „właściwą ulicą” a „właściwymi drzwiami”.

Chcesz zobaczyć gotową konfigurację z wieloma oddziałami, zanim zbudujesz własną? Otwórz demo kreatora — wczytuje ono przykładową firmę z trzema oddziałami: adresy, kolorowe numerowane pinezki i panel lokalizacji działają na żywo w podglądzie, gotowe do klikania.

WordPress: shortcode wtyczki czy czysty iframe?

Oba sposoby dają dokładnie ten sam widżet — wybierz według gustu.

Droga z wtyczką (zalecana): pobierz whatismylocation-widget.zip → wp-admin ▸ Wtyczki ▸ Dodaj nową ▸ Wyślij wtyczkę na serwer → Włącz. Potem dodaj blok Shortcode:

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

Atrybuty czytają się jak opcje kreatora: theme, marker, zoom, height, directions, a dla oddziałów pins="lat,lng,Label~Address|…" wraz z panel= i motion= (patrz tabela poniżej). Sekcja WordPress w kreatorze generuje kompletny shortcode za Ciebie — bez pisania.

Droga bez wtyczki: wklej iframe z kreatora do bloku Własny HTML. Ten sam widżet, żadnej wtyczki do aktualizowania; kosztem jest dłuższy kod w treści i brak późniejszej edycji przez atrybuty.

Squarespace, Shopify, Notion — i pozostałe

Poza WordPressem zwykle wystarczy jedno wklejenie: dodaj element HTML/osadzania swojej platformy (w Wix Embed HTML, w Squarespace blok Code, w Webflow Embed) i wstaw do niego iframe. Jedna różnica sprawia, że widżet mapy jest łatwiejszy niż widżet lokalizacji: nie potrzebuje atrybutu allow="geolocation", bo o nic nie pyta odwiedzających — nie ma więc niczego wrażliwego, co trzeba by zachować, gdy kreator stron przepisze Twój kod HTML.

Squarespace: dodaj blok Code i wklej. Jedna pułapka, o której warto wiedzieć od razu: bloki Code wymagają planu Business lub wyższego — w planie Personal blok pokaże Twój kod jako zwykły tekst, zamiast go wyrenderować.

Shopify zasługuje na coś lepszego niż wklejanie: mamy gotową sekcję motywu — jeden plik w motywie daje Ci natywny panel ustawień, w którym oddziały są blokami do przeciągania. Bez aplikacji i bez klucza API.

Notion i Google Sites osadzają przez adres URL, nie przez HTML. W ogóle nie przyjmą fragmentu z iframe — zamiast tego naciśnij Kopiuj adres URL widżetu w kreatorze i wklej go w bloku /embed w Notion albo w Google Sites przez Osadź ▸ Według adresu URL. Widżet jest pełną samodzielną stroną, więc w obu przypadkach wyświetli się idealnie.

Salesforce Experience Cloud (publiczne witryny społeczności): wstaw iframe do komponentu HTML Editor — potem poproś administratora, by dodał whatismylocation.ai w Setup ▸ Trusted URLs z dyrektywą CSP frame-src. Inaczej Salesforce po cichu zablokuje ramkę. Zespoły pracujące z kodem mogą owinąć ten sam adres URL w komponent Lightning Web Component o długości ~10 linii:

<!-- 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';
}

Wiele oddziałów: panel lokalizacji

W jednym osadzeniu zmieści się do 10 lokalizacji. W trybie zaawansowanym kreatora ustaw każdą pinezkę, nadaj jej etykietę i adres, a potem naciśnij Dodaj lokalizację. Odwiedzający dostają panel lokalizacji — akordeon obok mapy na komputerze, przewijany pasek kart na telefonie — z numerowanymi pinezkami. Wybór oddziału przelatuje mapą do niego i pokazuje jego adres z własnym linkiem do wyznaczenia trasy.

• panel= wybiera układ: auto (domyślnie — z boku przy szerokich iframe'ach, pasek przy wąskich), side, bottom albo none dla samych pinezek z okienkami.
• motion= ustawia animację przełączania: smooth (domyślny przelot), fade, lively lub none. Odwiedzający, którzy mają w systemie włączone „ograniczanie animacji”, zawsze dostają wersję natychmiastową, cokolwiek wybierzesz.
• open=no startuje z wszystkimi wpisami zwiniętymi; mapa sama dopasowuje widok do wszystkich oddziałów, a Twój zoom staje się maksimum.

Zestawienie opcji

Rozwiązywanie problemów w WordPressie

Shortcode wyświetla się na stronie jako zwykły tekst. Ten blok nie przetwarza shortcode'ów. W edytorze blokowym użyj bloku Shortcode (nie bloku kodu ani preformatowanego); w Elementorze użyj widżetu Shortcode, w Divi modułu Code. Użytkownicy klasycznego edytora: wpiszcie go w zakładce Wizualnie jako zwykły tekst.

Nie pojawia się zupełnie nic. Otwórz źródło strony i poszukaj whatismylocation. Komentarz HTML o brakującym lat/lng oznacza, że współrzędnych nie ma albo są nieprawidłowe — skopiuj kompletny shortcode z kreatora, zamiast wpisywać atrybuty ręcznie.

Iframe znika po zapisaniu (droga bez wtyczki). WordPress usuwa iframe'y dla roli użytkownika bez uprawnienia unfiltered_html — w instalacji multisite dotyczy to domyślnie także administratorów — i tak samo robią niektóre wtyczki bezpieczeństwa. Shortcode z wtyczki to czyste rozwiązanie: nie wymaga, by Twoja rola miała prawo zapisywać surowe iframe'y.

Mapa jest szara / kafelki się nie ładują. Kafelki pochodzą z tile.openstreetmap.org; bardzo agresywna blokada reklam albo sieć firmowa mogą je blokować (karta nakładki wyświetla się nadal). Sprawdź w innej sieci albo na telefonie w transmisji komórkowej.

Brak panelu lokalizacji. Panel pojawia się od 2 pinezek — jedna lokalizacja dostaje klasyczną kartę nakładki. Sprawdź też, czy nie jest ustawione panel="none".

Animacja przełączania nie odtwarza się. Niemal zawsze winne jest systemowe ustawienie „ograniczanie animacji” u odwiedzającego (albo u Ciebie) — widżet celowo je respektuje i przełącza natychmiast. To nie błąd, a pozostali odwiedzający nadal widzą wybrany przez Ciebie efekt.

Zmiany nie są widoczne. Wtyczka cache'ująca (albo cache hostingu) podaje starą stronę. Po edycji atrybutów shortcode'a wyczyść cache strony — sam widżet nie ma czego cache'ować.