Embedding your map

Embed Studio

You find it in the app under Embed Studio. Choose the map at the top. Next to it you see whether it is Live or still a Draft – drafts are not publicly reachable.

On the left you configure the embed, on the right you copy the code and see a live preview. Save your settings with Save.

Settings

• Width and height: for example 100% and 640px. Quick buttons set the height to 480, 640 or 800 px.
• Language: German or English. This affects buttons, filters, opening hours and the consent placeholder text.
• Appearance of this embed: accent colour, font, corners, map style and density. Empty means: as set on the map. That way the same map fits different websites.
• Show "Powered by": a small note linking to my-store-locator.com. Can be turned off from the Pro plan.
• Lazy loading: the map only loads once it scrolls into view.
• Load the map only after a click (GDPR): two-click consent, see below.
• Allowed websites: the domains where the map is meant to be embedded.

Option 1: iframe

The iframe works in practically every CMS and site builder. Paste it 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>

allow="geolocation" enables "use my location". The browser asks visitors for permission first.

Option 2: JavaScript widget

The widget is a placeholder plus a script:

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

If you want to adjust colour, font or map style per website, the iframe code with the URL parameters below is the better choice.

Two-click consent

With "Load the map only after a click (GDPR)", visitors first see a placeholder with this notice instead of the map:

The map only loads after a click on "Load map". The button uses your accent colour. Turning this on changes the code, so copy it again.

Whether you need two-click consent depends on your website and your consent setup. Background is in our guide on store locators and GDPR and on GDPR & security.

URL parameters

Embed settings are added to the map address as parameters. Embed Studio generates them for you, but you can also set them yourself.

Example:

https://app.my-store-locator.com/#/m/YOUR-TOKEN?lang=en&color=1f6fd1&style=dark

Allowed websites

Under Allowed websites you can specify in the app on which domains your map is meant to be embedded, for example www.your-company.com. This keeps track of where your map is in use.

Enter the domain exactly as your website is served – with or without "www". The list is a setting in your account; it does not currently block the embed code from being used on other websites.

Change the template, keep the code

Every map has a fixed token. When you change the template, colours or locations, the code stays the same. Embedded maps pick up the new look automatically.

Link and QR code

The Link & QR tab gives you the map's direct address to copy or open, plus a QR code you can download as SVG – for flyers, business cards or a shop window. Scanning it opens the map straight on the phone.

Platform guides

Step by step for WordPress, Shopify, Wix, Webflow, Jimdo and HTML. A WordPress plugin with a shortcode is coming soon.

Troubleshooting

• "Map not available": the map is a draft or has been deleted.
• Blank area in the editor: many editors do not show iframes in their preview. Check the published page.
• Content Security Policy: allow app.my-store-locator.com in frame-src (and in script-src for the widget).
• Map cut off: the surrounding container is shorter than the configured height.