How to Embed a Map Widget on Any Site

Start in the builder (the only real work)

Everything begins at the map-embed builder. Geocoding happens once, there — the snippet you copy carries fixed coordinates, so a geocoder outage or “address normalization” can never move your pin later. Type the address, watch the pin land, then drag it onto your actual entrance before copying: that ten-second drag is the difference between “the right street” and “the right door”.

Want to see a finished multi-branch setup before building yours? Open the builder demo — it loads a three-branch sample company with addresses, colored numbered pins, and the locations panel live in the preview, ready to poke.

WordPress: plugin shortcode or raw iframe?

Both routes end in the identical widget — pick by taste.

Plugin route (recommended): download whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Then add a Shortcode block:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Attributes read like the builder's options: theme, marker, zoom, height, directions, and for branches pins="lat,lng,Label~Address|…" with panel= and motion= (see the reference table below). The builder's WordPress section generates the complete shortcode for you — no typing.

No-plugin route: paste the iframe from the builder into a Custom HTML block. Same widget, no plugin to update; the trade-off is longer markup in your content and no attribute-style editing later.

Squarespace, Shopify, Notion — and the rest

Outside WordPress the job is usually one paste: add your platform's HTML/embed element (Wix Embed HTML, Squarespace Code block, Webflow Embed) and drop the iframe in. One difference makes the map widget easier than the location widget: it needs no allow="geolocation" attribute, because it never asks visitors for anything — so there is nothing fragile to preserve when a page builder rewrites your HTML.

Squarespace: add a Code block and paste. One catch worth knowing up front: Code blocks require the Business plan or higher — on the Personal plan the block shows your code as plain text instead of rendering it.

Shopify deserves better than a paste: we ship a ready-made theme section — one file in your theme gives you a native settings panel with branches as drag-to-reorder blocks, no app and no API key.

Notion and Google Sites embed by URL, not HTML. They won't accept an iframe snippet at all — instead, press Copy widget URL in the builder and paste it into Notion's /embed block or Google Sites' Embed ▸ By URL. The widget is a full standalone page, so it renders perfectly either way.

Salesforce Experience Cloud (public community sites): drop the iframe into an HTML Editor component — then have your admin add whatismylocation.ai under Setup ▸ Trusted URLs with the frame-src CSP directive, or Salesforce silently blocks the frame. Teams building with code can wrap the same URL in a ~10-line Lightning Web Component:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Multiple branches: the locations panel

Up to 10 locations fit in one embed. In the builder's Advanced mode, position each pin, give it a label and address, and press Add location. Visitors get a locations panel — an accordion beside the map on desktop, a swipeable card strip on phones — with numbered pins: picking a branch flies the map to it and shows its address with its own Get-directions link.

• panel= chooses the layout: auto (default — side on wide iframes, strip on narrow), side, bottom, or none for plain pins + popups.
• motion= sets the switch animation: smooth (default fly), fade, lively, or none. Visitors with “reduce motion” set in their system always get the instant version, whatever you choose.
• open=no starts with every entry collapsed; the map auto-fits all branches and your zoom becomes the maximum.

Options reference

WordPress troubleshooting

The shortcode shows as literal text on the page. That block doesn't process shortcodes. In the block editor use a Shortcode block (not a code or preformatted block); in Elementor use its Shortcode widget, in Divi a Code module. Classic-editor users: type it in the Visual tab as plain text.

Nothing appears at all. View the page source and search for whatismylocation. An HTML comment about missing lat/lng means the coordinates are absent or invalid — copy the complete shortcode from the builder rather than typing attributes by hand.

The iframe disappears when you save (no-plugin route). WordPress strips iframes for user roles without the unfiltered_html capability — on multisite that includes admins by default — and some security plugins do the same. The plugin shortcode is the clean fix: it doesn't rely on your role being allowed to save raw iframes.

The map is grey / tiles don't load. Tiles come from tile.openstreetmap.org; a very aggressive ad-blocker or corporate network can block them (the overlay card still renders). Confirm on another network or a phone on mobile data.

No locations panel. The panel appears from 2 pins up — a single location gets the classic overlay card. Also check panel="none" isn't set.

The switch animation doesn't play. Almost always the visitor's (or your own) operating-system “reduce motion” setting — the widget honors it by design and switches instantly. It isn't a bug, and other visitors still see your chosen preset.

Edits don't show up. A caching plugin (or host cache) is serving the old page. Purge the page cache after editing shortcode attributes — the widget itself has nothing to cache.