Як вбудувати віджет карти на будь-який сайт

Почніть у конструкторі (це вся справжня робота)

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

Хочете побачити готове налаштування з кількома філіями, перш ніж робити своє? Відкрийте демо конструктора — воно завантажує зразкову компанію з трьома філіями: адреси, кольорові нумеровані мітки й панель локацій одразу в попередньому перегляді, готові до експериментів.

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 локацій. У режимі Advanced у конструкторі розмістіть кожну мітку, дайте їй назву та адресу і натисніть Add location. Відвідувачі отримують панель локацій — акордеон поруч із картою на комп'ютері та смугу карток із гортанням на телефонах — із нумерованими мітками: вибір філії плавно переносить карту до неї й показує її адресу з власним посиланням на маршрут.

• 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".

Анімація перемикання не програється. Майже завжди причина — системне налаштування «зменшити анімацію» у відвідувача або у вас. Віджет свідомо його дотримується й перемикає миттєво. Це не помилка, а інші відвідувачі й далі бачать обраний вами варіант.

Зміни не відображаються. Плагін кешування (або кеш хостингу) віддає стару сторінку. Очистіть кеш сторінки після редагування атрибутів шорткоду — самому віджету кешувати нічого.