Embed a store locator with HTML, iframe or script

What you get

Your location map with list, search and filters on any page that accepts HTML – hand-coded, TYPO3, Joomla or another builder. You manage the data in My Store Locator.

Before you start

• A My Store Locator account (sign up free)
• A published map (status "Live")
• The embed code from the Embed Studio in the app
• A way to add HTML to your page

Option 1: iframe

The iframe is the simplest and most robust option. It also works where scripts are not allowed.

1. Open Embed Studio in the app and select your map.
2. Set height, language and, if you like, colour, font and map style.
3. Copy the code from the iframe tab.
4. Paste it into your page where the map should appear.

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

Option 2: JavaScript widget

The widget is a placeholder div plus a script. The script builds the map into the placeholder and supports consent mode.

1. In Embed Studio, copy the code from the JavaScript tab.
2. Place the div where the map should appear.
3. Include the script once per page, for example before </body>.

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

• data-token: your map's token (from Embed Studio)
• data-height: map height
• data-lang: map language, de or en
• data-consent="true": turns on two-click consent (leave it out to load the map right away)

Change the template, keep the code

Every map has a fixed token. When you change the template, colours or locations in the app, the code on your website stays the same.

Privacy: two-click consent

With "Load the map only after a click (GDPR)" in Embed Studio (or data-consent="true" on the widget), visitors first see a placeholder with a privacy notice. The map only loads after they click "Load map". More in our guide on store locators and GDPR.

Height and mobile

Both options use the full width of the surrounding element. The height is fixed. For phones you can set a different height with CSS or use the "Mobile Sheet" template.

If the map does not show up

• "Map not available": the map is still a draft. Publish it in the app.
• Content Security Policy: allow app.my-store-locator.com in frame-src and – for the widget – in script-src.
• Widget stays empty: check that the script loads and that the div has id="mystorelocator".

All options are explained in the embedding guide.

FAQ