So bettest du ein Karten-Widget auf jeder Website ein

Beginne im Builder (die einzige echte Arbeit)

Alles beginnt im Karten-Einbettungs-Builder. Das Geocoding passiert einmal, dort — das Snippet, das du kopierst, enthält feste Koordinaten. Ein Ausfall des Geocoders oder eine „Adress-Normalisierung“ kann deinen Pin später also nie verschieben. Gib die Adresse ein, sieh zu, wie der Pin landet, und zieh ihn vor dem Kopieren auf deinen tatsächlichen Eingang: Dieses Ziehen von zehn Sekunden ist der Unterschied zwischen „die richtige Straße“ und „die richtige Tür“.

Willst du ein fertiges Setup mit mehreren Filialen sehen, bevor du dein eigenes baust? Öffne die Builder-Demo — sie lädt ein Beispielunternehmen mit drei Filialen: mit Adressen, farbigen nummerierten Pins und dem Standorte-Panel live in der Vorschau, bereit zum Ausprobieren.

WordPress: Plugin-Shortcode oder reines iframe?

Beide Wege enden im identischen Widget — wähle nach Geschmack.

Plugin-Weg (empfohlen): whatismylocation-widget.zip herunterladen → wp-admin ▸ Plugins ▸ Installieren ▸ Plugin hochladen → Aktivieren. Dann füge einen Shortcode-Block hinzu:

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

Die Attribute lesen sich wie die Optionen im Builder: theme, marker, zoom, height, directions und für Filialen pins="lat,lng,Label~Address|…" mit panel= und motion= (siehe Referenztabelle unten). Der WordPress-Abschnitt im Builder erzeugt den kompletten Shortcode für dich — kein Tippen nötig.

Weg ohne Plugin: Füge das iframe aus dem Builder in einen Block Benutzerdefiniertes HTML ein. Gleiches Widget, kein Plugin zu aktualisieren; der Nachteil ist längeres Markup in deinem Inhalt und kein späteres Bearbeiten über Attribute.

Squarespace, Shopify, Notion — und der Rest

Außerhalb von WordPress ist es meist ein einziges Einfügen: Nimm das HTML-/Embed-Element deiner Plattform (Wix Embed HTML, Squarespace-Block Code, Webflow Embed) und setze das iframe hinein. Ein Unterschied macht das Karten-Widget einfacher als das Standort-Widget: Es braucht kein allow="geolocation"-Attribut, weil es Besucher nie um etwas bittet. So gibt es nichts Fragiles zu bewahren, wenn ein Page-Builder dein HTML umschreibt.

Squarespace: Füge einen Code-Block hinzu und setze das Snippet ein. Ein Haken, den du vorab kennen solltest: Code-Blöcke setzen den Business-Plan oder höher voraus — im Personal-Plan zeigt der Block deinen Code als reinen Text, statt ihn zu rendern.

Shopify verdient mehr als ein Einfügen: Wir liefern einen fertigen Theme-Abschnitt — eine Datei in deinem Theme gibt dir ein natives Einstellungs-Panel mit Filialen als Blöcke, die du per Drag-and-drop sortierst, ohne App und ohne API-Schlüssel.

Notion und Google Sites betten per URL ein, nicht per HTML. Sie akzeptieren überhaupt kein iframe-Snippet — drücke stattdessen im Builder auf Widget-URL kopieren und füge sie in Notions /embed-Block oder in Google Sites unter Einbetten ▸ Über URL ein. Das Widget ist eine vollständige eigenständige Seite und wird deshalb in beiden Fällen perfekt dargestellt.

Salesforce Experience Cloud (öffentliche Community-Seiten): Setze das iframe in eine HTML Editor-Komponente — lass dann deinen Admin whatismylocation.ai unter Setup ▸ Trusted URLs mit der CSP-Direktive frame-src hinzufügen, sonst blockiert Salesforce den Frame stillschweigend. Teams, die mit Code arbeiten, können dieselbe URL in eine Lightning Web Component mit rund 10 Zeilen packen:

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

Mehrere Filialen: das Standorte-Panel

In eine Einbettung passen bis zu 10 Standorte. Positioniere im Modus Erweitert des Builders jeden Pin, gib ihm ein Label und eine Adresse und drücke Standort hinzufügen. Besucher bekommen ein Standorte-Panel — ein Akkordeon neben der Karte am Desktop, eine wischbare Kartenleiste am Handy — mit nummerierten Pins: Wählt jemand eine Filiale, fliegt die Karte dorthin und zeigt ihre Adresse mit eigenem Link zur Routenplanung.

• panel= wählt das Layout: auto (Standard — seitlich bei breiten iframes, Leiste bei schmalen), side, bottom oder none für einfache Pins + Popups.
• motion= legt die Wechsel-Animation fest: smooth (Standard-Flug), fade, lively oder none. Besucher, die im System „Bewegung reduzieren“ aktiviert haben, bekommen immer die sofortige Variante — ganz gleich, was du wählst.
• open=no startet mit allen Einträgen eingeklappt; die Karte passt sich automatisch allen Filialen an und dein zoom wird zum Maximum.

Referenz der Optionen

WordPress: Fehlerbehebung

Der Shortcode erscheint als reiner Text auf der Seite. Dieser Block verarbeitet keine Shortcodes. Nutze im Block-Editor einen Shortcode-Block (keinen Code- oder Preformatted-Block); in Elementor das Shortcode-Widget, in Divi ein Code-Modul. Nutzer des klassischen Editors: Tippe ihn im Tab „Visuell“ als reinen Text ein.

Es erscheint überhaupt nichts. Sieh dir den Quelltext der Seite an und suche nach whatismylocation. Ein HTML-Kommentar über fehlende lat/lng heißt: Die Koordinaten fehlen oder sind ungültig. Kopiere den kompletten Shortcode aus dem Builder, statt Attribute von Hand zu tippen.

Das iframe verschwindet beim Speichern (Weg ohne Plugin). WordPress entfernt iframes bei Benutzerrollen ohne die Berechtigung unfiltered_html — in einem Multisite betrifft das standardmäßig auch Administratoren — und manche Sicherheits-Plugins machen dasselbe. Der Plugin-Shortcode ist die saubere Lösung: Er hängt nicht davon ab, ob deine Rolle rohe iframes speichern darf.

Die Karte ist grau / Tiles laden nicht. Die Tiles kommen von tile.openstreetmap.org; ein sehr aggressiver Werbeblocker oder ein Firmennetzwerk kann sie blockieren (die Infokarte im Overlay wird trotzdem angezeigt). Prüfe es in einem anderen Netzwerk oder am Handy über Mobilfunk.

Kein Standorte-Panel. Das Panel erscheint ab 2 Pins — ein einzelner Standort bekommt die klassische Overlay-Karte. Prüfe außerdem, ob nicht panel="none" gesetzt ist.

Die Wechsel-Animation läuft nicht. Fast immer liegt es an der Einstellung „Bewegung reduzieren“ im Betriebssystem des Besuchers (oder in deinem eigenen) — das Widget respektiert sie bewusst und wechselt sofort. Das ist kein Fehler, und andere Besucher sehen weiterhin dein gewähltes Preset.

Änderungen erscheinen nicht. Ein Caching-Plugin (oder der Cache des Hosters) liefert die alte Seite aus. Leere den Seiten-Cache, nachdem du Shortcode-Attribute geändert hast — das Widget selbst hat nichts zu cachen.