Store Locator per HTML, iframe oder Script einbinden

Was Sie bekommen

Ihre Standortkarte mit Liste, Suche und Filtern auf jeder Seite, die HTML zulässt – ob selbst programmiert, TYPO3, Joomla oder ein anderer Baukasten. Die Daten pflegen Sie in My Store Locator.

Voraussetzungen

• Ein Konto bei My Store Locator (kostenlos registrieren)
• Eine veröffentlichte Karte (Status „Live“)
• Der Einbettungscode aus dem Embed Studio der App
• Die Möglichkeit, HTML in Ihre Seite einzufügen

Variante 1: iframe

Der iframe ist die einfachste und robusteste Lösung. Er funktioniert auch dort, wo Skripte nicht erlaubt sind.

1. Öffnen Sie in der App das Embed Studio und wählen Sie Ihre Karte.
2. Stellen Sie Höhe, Sprache und bei Bedarf Farbe, Schrift und Kartenstil ein.
3. Kopieren Sie den Code im Reiter iframe.
4. Fügen Sie ihn in Ihre Seite ein, dort wo die Karte erscheinen soll.

<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>

Variante 2: JavaScript-Widget

Das Widget besteht aus einem Platzhalter-div und einem Script. Es baut die Karte in den Platzhalter ein und unterstützt den Einwilligungsmodus.

1. Kopieren Sie im Embed Studio den Code im Reiter JavaScript.
2. Fügen Sie das div dort ein, wo die Karte erscheinen soll.
3. Binden Sie das Script einmal pro Seite ein, z. B. vor </body>.

<div id="mystorelocator" data-token="IHR-TOKEN" data-height="640px" data-lang="de" data-consent="true"></div>
<script src="https://app.my-store-locator.com/widget.js" async defer></script>

• data-token: der Token Ihrer Karte (aus dem Embed Studio)
• data-height: Höhe der Karte
• data-lang: Sprache der Karte, de oder en
• data-consent="true": Zwei-Klick-Lösung einschalten (weglassen = Karte lädt sofort)

Template wechseln, Code behalten

Jede Karte hat einen festen Token. Wenn Sie das Template, die Farben oder die Standorte in der App ändern, bleibt der Code auf Ihrer Website gleich.

Datenschutz: Zwei-Klick-Lösung

Mit „Karte erst nach Klick laden (DSGVO)“ im Embed Studio (bzw. data-consent="true" beim Widget) sehen Besucher zuerst einen Platzhalter mit Datenschutzhinweis. Erst nach Klick auf „Karte laden“ wird die Karte geladen. Mehr dazu im Ratgeber Store Locator und DSGVO.

Höhe und mobile Darstellung

Beide Varianten nutzen die volle Breite des umgebenden Elements. Die Höhe ist fest eingestellt. Für Smartphones können Sie per CSS eine andere Höhe setzen oder das Template „Mobile Sheet“ wählen.

Wenn die Karte nicht erscheint

• „Karte nicht verfügbar“: Die Karte ist noch ein Entwurf. Veröffentlichen Sie sie in der App.
• Content Security Policy: Erlauben Sie app.my-store-locator.com unter frame-src und – für das Widget – unter script-src.
• Widget bleibt leer: Prüfen Sie, ob das Script geladen wird und das div die id="mystorelocator" trägt.

Alle Optionen erklärt die Hilfe zum Einbetten.

FAQ