Перейти до основного контенту

Додавання карти в Onepage (Google Maps, OpenStreetMap та інші)

У цій статті ви дізнаєтеся, як додати карту на свій вебсайт у Onepage

Автор: Alina
Оновлено сьогодні

Карта особливо корисна, якщо ваша пропозиція прив’язана до конкретного місця, наприклад, для магазину, кафе, офісу або салону.

Для цього ви можете використати вбудований елемент карти або підключити зовнішні сервіси, наприклад Google Maps.


Існує три способи додати карту на вашу Onepage-сторінку.

Варіант 1: Елемент Onepage «Карта» (на основі OpenStreetMap)

Як це зробити:

  1. Додайте макетний блок

  2. Оберіть елемент «Карта»

  3. Введіть потрібну адресу

Якщо вашу адресу не знайдено, ви можете додати її в OpenStreetMap. Після того як адресу буде додано, вона також відображатиметься в Onepage.


Варіант 2: Підключення Google Maps через API

API-ключ ви створюєте безпосередньо в Google. Тут ви знайдете офіційну інструкцію від Google.

Інструкція є дуже детальною, тому нижче ще раз коротко найважливіші кроки:

  1. Створення API-ключа (Google Maps)

  • Увійдіть у Google Cloud Console

  • Перейдіть у розділ «Облікові дані»

  • Натисніть «Створити облікові дані»«API-ключ»

  • За потреби обмежте API-ключ, щоб захистити його використання

  • Натисніть «Створити» — після цього ваш API-ключ буде відображений і його можна використовувати в Onepage

  • Важливо: щоб карта відображалася в Onepage, потрібно створити Google Maps API-ключ, активувати Maps JavaScript API та додати обліковий запис для білінгу в Google.

2. Додавання в Onepage:

Налаштування → Налаштування проекту → Інтеграції → Google Maps

Альтернативно ви можете вставити Google API-ключ безпосередньо в потрібному розділі секції.


Можливість 3: Інтеграція через Custom Code (починаючи з плану Essential)

За допомогою Custom Code Ви можете інтегрувати Google Maps або інші картографічні сервіси, такі як Mapbox або Leaflet, на Вашу сторінку Onepage.

Для цього потрібен платний тариф (починаючи з тарифу Essential), оскільки функція Custom Code доступна лише тоді.

Ви можете додати код:

  • або в окремий розділ (наприклад, на конкретній сторінці),

  • або для всього проєкту / всього вебсайту (у налаштуваннях проєкту).

Додаткову інформацію Ви знайдете у наших статтях Центру допомоги.

Цей метод особливо підходить для індивідуальних вимог або розширених відображень.

Для більшості випадків використання ми рекомендуємо інтеграцію через API або стандартний елемент.

📝 За допомогою цих трьох можливостей Ви можете гнучко інтегрувати карту на Ваш вебсайт Onepage, залежно від Ваших вимог.


Поширені питання та їх вирішення

Чи працює карта також на мобільних пристроях?

Так, елемент карти Onepage і Google Maps автоматично адаптуються до мобільних пристроїв.

Альтернативно Ви можете додатково оптимізувати відображення для мобільних пристроїв, продублювавши секції та створивши окремі вигляди для десктопу та мобільної версії.

Додаткову інформацію з цієї теми Ви знайдете в нашому Центрі допомоги.

Чи можу я відображати кілька локацій на одній карті?

За допомогою стандартного елемента карти можна відобразити лише одну локацію.

Для відображення кількох локацій потрібен Google Maps API або використання Custom Code.

Ви отримали відповідь на своє запитання?