Store Locator in WordPress einbinden

Ihre Standortkarte erscheint in WordPress über einen einzigen Block. Sie brauchen dafür kein Plugin und keine Programmierkenntnisse.

Was Sie bekommen

Eine interaktive Standortkarte mit Liste, Suche und Filtern direkt auf Ihrer WordPress-Seite. Die Standorte pflegen Sie weiter in My Store Locator – Änderungen erscheinen auf Ihrer Website, ohne dass Sie den Code anfassen müssen.

Voraussetzungen

  • Ein Konto bei My Store Locator (kostenlos registrieren)
  • Eine veröffentlichte Karte (Status „Live“, nicht „Entwurf“)
  • Der Einbettungscode aus dem Embed Studio der App
  • In WordPress Rechte zum Bearbeiten von Seiten

Schritt für Schritt

  1. Öffnen Sie in der App das Embed Studio, wählen Sie Ihre Karte und kopieren Sie den Code im Reiter iframe.
  2. Öffnen Sie in WordPress die Seite, auf der die Karte erscheinen soll (z. B. „Standorte“), im Block-Editor.
  3. Klicken Sie auf das Plus-Symbol und fügen Sie den Block „Individuelles HTML“ ein.
  4. Fügen Sie den kopierten Code in den Block ein.
  5. Klicken Sie auf Aktualisieren bzw. Veröffentlichen und prüfen Sie die Seite im Frontend.

Der Code sieht etwa so aus:

<iframe src="https://app.my-store-locator.com/#/m/IHR-TOKEN" title="Standortkarte" style="width:100%;height:640px;border:0;max-width:100%" loading="lazy" allow="geolocation"></iframe>

Mit Elementor oder anderen Page-Buildern funktioniert es genauso: Nutzen Sie dort das jeweilige HTML-Widget.

Hinweis: Ein eigenes WordPress-Plugin mit Shortcode ist in Vorbereitung. Bis dahin ist der Block „Individuelles HTML“ der empfohlene Weg.

Template wechseln, Code behalten

Jede Karte hat einen festen Token. Wenn Sie in der App das Template, die Farben oder die Standorte ändern, bleibt der Code gleich. Sie müssen in WordPress also nichts nachziehen.

Datenschutz: Zwei-Klick-Lösung

Aktivieren Sie im Embed Studio die Option „Karte erst nach Klick laden (DSGVO)“. Besucher sehen dann zuerst einen Platzhalter mit Datenschutzhinweis. Die Karte lädt erst, wenn jemand auf „Karte laden“ klickt. Kopieren Sie den Code nach dem Umschalten neu, denn er ändert sich dadurch.

Höhe und mobile Darstellung

Die Breite ist auf 100 % gesetzt, die Karte passt sich also der Spaltenbreite an. Die Höhe stellen Sie im Embed Studio ein (z. B. 480, 640 oder 800 px). Für Seiten, die vor allem am Smartphone besucht werden, eignet sich das Template „Mobile Sheet“.

Wenn die Karte nicht erscheint

  • Leer im Editor: Manche Editor-Vorschauen zeigen iframes nicht an. Prüfen Sie die veröffentlichte Seite.
  • „Karte nicht verfügbar“: Die Karte ist noch ein Entwurf. Veröffentlichen Sie sie in der App.
  • Code wird entfernt: Einige Sicherheits-Plugins oder eingeschränkte Benutzerrollen filtern iframes. Bearbeiten Sie die Seite als Administrator oder erlauben Sie iframes von app.my-store-locator.com.
  • Content Security Policy: Setzt Ihre Website eine CSP, muss frame-src die Domain app.my-store-locator.com erlauben.

Mehr Details finden Sie in der Hilfe zum Einbetten.

FAQ

Brauche ich ein Plugin?

Nein. Der Block „Individuelles HTML“ reicht. Ein eigenes Plugin mit Shortcode ist in Vorbereitung.

Funktioniert das mit Elementor, Divi oder anderen Buildern?

Ja. Verwenden Sie das HTML- oder Code-Element des jeweiligen Builders und fügen Sie dort denselben Code ein.

Muss ich den Code ändern, wenn ich neue Standorte anlege?

Nein. Neue oder geänderte Standorte erscheinen automatisch auf der Karte.

Kann ich die Karte auf mehreren Seiten zeigen?

Ja. Fügen Sie denselben Code auf jeder gewünschten Seite ein oder legen Sie in der App mehrere Karten an, z. B. pro Region.

Probieren Sie es mit Ihren eigenen Standorten aus.

Konto anlegen, Standorte importieren, Karte einbinden. Der Free-Plan bleibt kostenlos – Pro können Sie 14 Tage testen.

Kostenlos startenDemo buchen