Як додати карти до застосунку: вбудування, інтерактивні карти та пошук локацій

Щоб додати карту до застосунку, спершу вирішіть, чи потрібне вам статичне вбудування (одна локація з позначкою, як «знайди наш магазин») чи інтерактивна карта (багато позначок з ваших даних, фільтри, групування, «поблизу мене»). Для однієї локації вбудована карта — найшвидший варіант, а з Maps Embed API від Google — ще й безкоштовний. Для інтерактивних карт використовуйте бібліотеку JavaScript для карт — Google Maps JavaScript API, Mapbox GL JS або відкриту Leaflet з постачальником тайлів, — зберігайте широту й довготу кожного місця у вашій базі даних і обмежте свій ключ API вашим власним доменом. Відомості про постачальників нижче взяті з їхньої власної документації станом на вересень 2026 року.

Яка карта вам потрібна?

Більшості невеликих сайтів бізнесу потрібен лише перший рядок. Каталогам, маркетплейсам і сайтам оголошень потрібні третій і четвертий.

Ваші варіанти

Google Maps Platform

Керівництво Google для початку роботи каже, що потрібно створити проєкт Cloud з увімкненим рахунком і активувати потрібні API. Тарифікація «оплата за використанням» дає SKU Essentials, зокрема Dynamic Maps з безкоштовним місячним лімітом 10 000 подій, а далі Dynamic Maps коштує $7,00 за 1 000 подій (на першому рівні обсягу). SKU Maps Embed зазначено як необмежений і безкоштовний. Google також продає щомісячні підписні плани. Актуальні цифри — на сторінці цін Google Maps Platform.

Mapbox

На сторінці цін Mapbox вказано 50 000 безкоштовних щомісячних завантажень карт для Mapbox GL JS у вебі, далі $5,00 за 1 000 завантажень. Див. ціни Mapbox.

Leaflet і OpenStreetMap

Leaflet описує себе як бібліотеку JavaScript з відкритим кодом для зручних на мобільних пристроях інтерактивних карт, приблизно 42 КБ JavaScript. Йому потрібні тайли карти (зображення карти) з якогось джерела. Публічні сервери тайлів OpenStreetMap спокусливі, але політика використання тайлів вимагає видимої атрибуції, забороняє масове завантаження, не дає жодних гарантій сервісу й попереджає комерційні сервіси, що доступ може бути відкликано. Для справжнього продукту використовуйте комерційне або власне джерело тайлів, яке працює з Leaflet.

Ключі API: публічні, але обмежені

Ключі карт, які використовуються в браузері, видно кожному, хто відкриває вашу сторінку. Це очікувано, але це означає, що хтось може скопіювати ваш ключ і накрутити використання на ваш рахунок. Рекомендація Google з безпеки — додати обмеження за вебсайтом (HTTP referrer) зі списком ваших доменів і обмеження API, щоб ключ працював лише для використовуваних API.

Ключі для серверних сервісів — наприклад, геокодування тисяч адрес — мають бути окремими ключами, що зберігаються в секретах на сервері, а не на сторінці. Також налаштуйте в консолі постачальника сповіщення про бюджет або квоти, щоб помилка не перетворилася на великий рахунок.

Геокодування: перетворіть адреси на координати один раз

Карти відображають широту та довготу, а не адреси. Перетворення адреси на координати називається геокодуванням, і більшість постачальників беруть плату за кожен запит. Ефективний шаблон:

1. Коли оголошення зберігається, геокодуйте його адресу на сервері.
2. Збережіть широту та довготу в базі даних.
3. Карта читає збережені координати; вона ніколи не геокодує під час перегляду сторінки.

Перевіряйте умови кожного постачальника щодо того, як довго можна зберігати результати геокодування; вони відрізняються.

Приклади промптів

Одна вбудована карта:

На контактній сторінці додай вбудовану карту Google, що показує нашу адресу (12 High Street, Leeds), через Maps Embed API з ключем у GOOGLE_MAPS_EMBED_KEY. Під нею додай посилання «Прокласти маршрут». На телефонах зроби її на всю ширину та завантажуй лінивим способом.

Інтерактивна карта оголошень:

Додай широту й довготу до таблиці listings. Коли оголошення створюється або змінюється його адреса, геокодуй її на сервері з ключем у GEOCODING_API_KEY і збережи координати. На сторінці Browse покажи карту з маркером на кожне оголошення через Leaflet, з групуванням, коли маркери перекриваються. Клік на маркер показує назву, ціну та посилання. Карта та список мають використовувати ті самі фільтри.

«Поблизу мене»:

Додай кнопку «Поблизу мене», яка запитує місцезнаходження відвідувача і показує оголошення в радіусі 10 км, відсортовані за відстанню. Якщо він відмовляє в доступі до місцезнаходження, дозволь ввести назву міста.

Крок за кроком

1. Оберіть тип карти з таблиці на початку.
2. Створіть обліковий запис постачальника та проєкт і активуйте лише потрібні API.
3. Створіть ключі: ключ для браузера, обмежений вашими доменами (включно з доменом попереднього перегляду під час створення), і за потреби серверний ключ для геокодування.
4. Зберігайте ключі як секрети і просіть конструктор використовувати їх; ключ для браузера все одно має бути обмеженим, хоча й потрапляє на сторінку.
5. Зберігайте координати для кожного місця у своїй базі даних.
6. Побудуйте карту: маркери, спливаючі вікна, групування та розумний початковий масштаб.
7. Поєднайте її зі списком. Сама карта важко користується на телефоні та незручна для екранних читачів. Показуйте ті самі результати як список.
8. Встановіть сповіщення про бюджет у консолі постачальника.
9. Опублікуйте й протестуйте на живому домені, адже обмеження за referrer часто блокують карту, доки не додано живий домен.

Типові помилки

• Ключі без обмежень. Будь-хто може використати їх на своєму сайті.
• Геокодування при кожному перегляді сторінки. Повільно й дорого; геокодуйте один раз при збереженні.
• Забутий живий домен в обмеженнях ключа. Працює в попередньому перегляді, а в продакшені — порожній сірий блок.
• Макети лише з картою. Позначки без списку незручні на малих екранах і недоступні.
• Сотні маркерів без групування. Нечитабельно й повільно.
• Відсутня атрибуція. Більшість постачальників карт і тайлів її вимагає, і її приховування порушує їхні умови.
• Запит місцезнаходження під час завантаження сторінки. Запитуйте лише тоді, коли користувач натискає «Поблизу мене».

Контрольний список

• Обрано правильний тип карти для завдання
• Ключ для браузера обмежено вашими доменами та потрібними API
• Серверні ключі зберігаються в секретах
• Координати збережено в базі даних, геокодовано один раз
• Результати також показано списком
• Групування для багатьох маркерів
• Атрибуція видима
• Сповіщення про бюджет налаштовано у постачальника
• Протестовано на опублікованому домені та на телефоні

Додавання карт у Mythex

У Mythex немає вбудованої інтеграції карт; ви приносите власний ключ постачальника, додаєте його як секрет проєкту (або вставляєте, коли агент показує картку секретів), і просите карту в чаті, як описано в Integrate any API. Координати зберігаються в базі даних проєкту. Не забудьте додати і домен попереднього перегляду, і опублікований домен до обмежень вебсайту ключа, а після зміни секретів опублікуйте застосунок знову.

Карти зазвичай розташовуються поруч із пошуком і списками: див. як додати пошук до застосунку, як створити сайт-каталог і як створити сайт малого бізнесу.

Запитання