Как вставить виджет карты на любой сайт

Начните в конструкторе (это вся основная работа)

Всё начинается в конструкторе карты. Геокодирование выполняется один раз, там — в скопированный код записаны фиксированные координаты, поэтому сбой геокодера или «нормализация адреса» уже не сдвинут вашу метку. Введите адрес, дождитесь появления метки и перетащите её на настоящий вход перед копированием: эти десять секунд отличают «нужную улицу» от «нужной двери».

Хотите сначала посмотреть готовую настройку с несколькими филиалами? Откройте демо конструктора — в нём загружается пример компании с тремя филиалами: адреса, цветные нумерованные метки и панель мест прямо в предпросмотре, всё можно потрогать.

WordPress: шорткод плагина или чистый iframe?

Оба пути дают одинаковый виджет — выбирайте по вкусу.

Через плагин (рекомендуем): скачайте whatismylocation-widget.zip → wp-admin ▸ Плагины ▸ Добавить новый ▸ Загрузить плагин → Активировать. Затем добавьте блок Шорткод:

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

Атрибуты повторяют параметры конструктора: theme, marker, zoom, height, directions, а для филиалов — pins="lat,lng,Label~Address|…" вместе с panel= и motion= (см. таблицу ниже). Раздел WordPress в конструкторе сам собирает полный шорткод — печатать ничего не нужно.

Без плагина: вставьте iframe из конструктора в блок Произвольный HTML. Виджет тот же, обновлять плагин не нужно; минус — более длинный код в содержимом и невозможность потом править атрибуты.

Squarespace, Shopify, Notion — и все остальные

Вне WordPress обычно хватает одной вставки: добавьте элемент HTML или встраивания вашей платформы (Wix Embed HTML, блок Code в Squarespace, Embed в Webflow) и вставьте туда iframe. Одно отличие делает виджет карты проще, чем виджет местоположения: ему не нужен атрибут allow="geolocation", ведь он ничего не спрашивает у посетителей — значит, нет и хрупкой детали, которую надо сохранить, когда конструктор страниц переписывает ваш HTML.

Squarespace: добавьте блок Code и вставьте код. Одна деталь, о которой лучше знать заранее: блоки Code доступны только на тарифе Business и выше — на тарифе Personal блок покажет ваш код обычным текстом вместо готового виджета.

Shopify заслуживает большего, чем простая вставка: у нас есть готовая секция темы — один файл в теме даёт нативную панель настроек, где филиалы становятся блоками с перетаскиванием, без приложения и без API-ключа.

Notion и Google Sites встраивают по URL, а не по HTML. Код iframe они вообще не примут — вместо этого нажмите Copy widget URL в конструкторе и вставьте ссылку в блок /embed в Notion или в Embed ▸ By URL в Google Sites. Виджет — это полноценная отдельная страница, поэтому в обоих случаях он отображается корректно.

Salesforce Experience Cloud (публичные сайты сообществ): вставьте iframe в компонент HTML Editor — затем попросите администратора добавить whatismylocation.ai в Setup ▸ Trusted URLs с директивой CSP frame-src, иначе Salesforce молча заблокирует фрейм. Те, кто работает с кодом, могут обернуть тот же URL в Lightning Web Component примерно на 10 строк:

<!-- 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';
}

Несколько филиалов: панель мест

В один виджет помещается до 10 точек. В режиме «Расширенный» в конструкторе поставьте каждую метку, задайте ей название и адрес и нажмите «Добавить место». Посетители получают панель мест — аккордеон рядом с картой на компьютере и ленту карточек с прокруткой на телефоне — с нумерованными метками. Выбор филиала перелетает карту к нему и показывает его адрес с собственной ссылкой «Проложить маршрут».

• panel= выбирает раскладку: auto (по умолчанию — сбоку в широких iframe, лентой в узких), side, bottom или none для простых меток и всплывающих окон.
• motion= задаёт анимацию переключения: smooth (по умолчанию, плавный перелёт), fade, lively или none. Посетители, у которых в системе включено уменьшение движения, всегда получают мгновенный вариант, что бы вы ни выбрали.
• open=no запускает виджет со свёрнутыми записями; карта сама подгоняет масштаб под все филиалы, а ваш zoom становится максимальным.

Справочник параметров

Устранение проблем в WordPress

Шорткод виден на странице как обычный текст. Этот блок не обрабатывает шорткоды. В блочном редакторе используйте блок Шорткод (не блок кода и не форматированный текст); в Elementor — виджет Shortcode, в Divi — модуль Code. В классическом редакторе введите его во вкладке «Визуально» как обычный текст.

Не появляется вообще ничего. Откройте исходный код страницы и найдите whatismylocation. HTML-комментарий о нехватке lat/lng означает, что координат нет или они неверные — скопируйте полный шорткод из конструктора, а не набирайте атрибуты вручную.

iframe пропадает после сохранения (вариант без плагина). WordPress вырезает iframe у ролей без права unfiltered_html — в мультисайте по умолчанию это касается и администраторов. Так же поступают некоторые плагины безопасности. Чистое решение — шорткод плагина: ему не нужно, чтобы вашей роли разрешали сохранять чистые iframe.

Карта серая, тайлы не загружаются. Тайлы приходят с tile.openstreetmap.org; очень агрессивный блокировщик рекламы или корпоративная сеть могут их блокировать (карточка поверх карты при этом отображается). Проверьте в другой сети или на телефоне через мобильный интернет.

Нет панели мест. Панель появляется начиная с 2 меток — для одной точки показывается классическая карточка поверх карты. Ещё проверьте, что не задано panel="none".

Анимация переключения не проигрывается. Почти всегда дело в системной настройке «уменьшить движение» у посетителя или у вас самих — виджет намеренно её учитывает и переключается мгновенно. Это не ошибка, остальные посетители по-прежнему видят выбранный вами вариант.

Изменения не видны. Плагин кеширования (или кеш хостинга) отдаёт старую страницу. Очистите кеш страницы после правки атрибутов шорткода — самому виджету кешировать нечего.