Karte einbetten mit widget.js

Der kürzeste Code

<div class="msl-map" data-token="IHR-TOKEN"></div>
<script src="https://app.my-store-locator.com/widget.js" async></script>

Das Script sucht alle Container und setzt in jeden einen iframe mit der öffentlichen Karte. Den Token finden Sie in der App im Embed Studio oder unter Karten. Er gehört fest zur Karte: Wenn Sie Template, Farben oder Standorte ändern, bleibt der Code gleich.

Der Token ist öffentlich - er steht in jedem Einbettungscode. Er erlaubt nur das Anzeigen einer veröffentlichten Karte. Entwürfe sind nicht erreichbar, die Karte zeigt dann „Karte nicht verfügbar“.

Container

Das Widget erkennt drei Schreibweisen:

In Plugins empfehlen wir class="msl-map" plus eine eigene, eindeutige ID, damit Sie den Container selbst wiederfinden.

Attribute

Farbe, Schrift, Ecken, Kartenstil und Dichte stellen Sie in der App ein. Wenn eine Einbettung anders aussehen soll als die Karte selbst, nutzen Sie den iframe mit URL-Parametern.

Mehrere Karten auf einer Seite

<div class="msl-map" data-token="TOKEN-FILIALEN" data-height="480px"></div>
<div class="msl-map" data-token="TOKEN-HAENDLER" data-lang="en"></div>
<script src="https://app.my-store-locator.com/widget.js" async></script>

Binden Sie das Script einmal ein. Wenn es doch zweimal auf der Seite steht - zum Beispiel weil zwei Plugin-Blöcke es jeweils mitbringen - entstehen keine doppelten Karten: Die zweite Kopie sucht nur nach neuen Containern.

Page-Builder und Single-Page-Apps

Das Widget beobachtet die Seite. Container, die später eingefügt werden (Elementor, Shopify-Theme-Editor, Shopware-Erlebniswelten, React, Vue), bekommen ihre Karte automatisch. Ändert sich data-token eines Containers, baut das Widget die Karte mit dem neuen Token neu auf.

Für Fälle, in denen Sie selbst steuern möchten, gibt es window.MyStoreLocator:

// Beispiel: Container per JavaScript anlegen
const el = document.createElement('div');
el.dataset.token = 'IHR-TOKEN';
el.dataset.lang = 'de';
document.querySelector('#standorte').appendChild(el);
if (window.MyStoreLocator) window.MyStoreLocator.mount(el);

window.MyStoreLocator gibt es, sobald widget.js geladen ist. Ein Container mit class="msl-map" braucht den Aufruf nicht - den findet das Widget selbst.

Einwilligungsmodus

Mit data-consent="true" zeigt das Widget statt der Karte zuerst einen Platzhalter mit einem kurzen Datenschutzhinweis und der Schaltfläche Karte laden. Erst nach dem Klick wird der iframe geladen.

Die Sprache des Platzhalters richtet sich nach data-lang. Ohne data-lang gilt das lang-Attribut Ihrer Seite: de, de-DE, de-AT und so weiter ergeben Deutsch, alles andere Englisch („Load map“).

<div class="msl-map" data-token="IHR-TOKEN" data-lang="de" data-consent="true" data-lazy="true"></div>
<script src="https://app.my-store-locator.com/widget.js" async></script>

<div class="msl-map" data-token="IHR-TOKEN" data-lang="de"></div>
<button type="button" id="msl-load">Karte laden</button>
<script>
document.getElementById('msl-load').addEventListener('click', function () {
  var s = document.createElement('script');
  s.src = 'https://app.my-store-locator.com/widget.js';
  document.head.appendChild(s);
  this.remove();
});
</script>

Ob und welche Lösung Sie brauchen, hängt von Ihrer Website und Ihrem Consent-Konzept ab. Hintergründe im Ratgeber Store Locator und DSGVO.

iframe statt Script

Wo kein Script erlaubt ist, funktioniert der iframe allein:

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

allow="geolocation" erlaubt „Mein Standort“; der Browser fragt Besucher vorher. Für die automatische Höhe und den Einwilligungs-Platzhalter nehmen Sie das Widget.

Nur auf erlaubten Websites

Im Embed Studio können Sie pro Karte Nur auf erlaubten Websites anzeigen einschalten (Standard: aus). Dann zeigt die Karte in iframes fremder Websites „Karte nicht verfügbar“. Die Prüfung läuft im Browser der Besucher. Sie erschwert das Einbetten auf fremden Websites, macht die öffentlichen Kartendaten aber nicht geheim. Die direkte Adresse der Karte funktioniert weiter. Tragen Sie die Domains unter Erlaubte Websites ein: firma.de gilt auch für www.firma.de, *.firma.de für alle Subdomains.

Content Security Policy

Wenn Ihre Website eine CSP sendet, erlauben Sie:

script-src https://app.my-store-locator.com;
frame-src https://app.my-store-locator.com;

Token aus einer Eingabe lesen

Wenn Ihr Plugin ein Eingabefeld für die Karte hat, akzeptieren Sie am besten alles, was Nutzer kopieren könnten: den reinen Token, den kompletten Einbettungscode oder die Adresse der Karte (…/#/m/IHR-TOKEN). Ein gültiger Token passt auf ^[A-Za-z0-9_-]{6,64}$.

function mslToken(input) {
  const s = String(input || '').trim();
  const m = s.match(/#\/m\/([A-Za-z0-9_-]{6,64})/) || s.match(/data-token="([A-Za-z0-9_-]{6,64})"/);
  const t = m ? m[1] : s;
  return /^[A-Za-z0-9_-]{6,64}$/.test(t) ? t : null;
}

Bequemer für Ihre Nutzer ist der Verbinden-Ablauf: Dann wählen sie die Karte in der App, und Ihr Plugin bekommt den Token automatisch.