Как добавить карты в приложение: встраивания, интерактивные карты и поиск точек

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

Какая карта вам нужна?

Большинству сайтов малого бизнеса нужна только первая строка. Каталогам, маркетплейсам и сайтам-справочникам нужны третья и четвёртая.

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

Google Maps Platform

Руководство Google по началу работы говорит, что нужно создать проект Cloud с включённой оплатой и включить нужные API. Тарифы pay-as-you-go дают 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 КБ. Ей нужны тайлы карты (изображения самой карты) откуда-то ещё. Публичные тайловые серверы OpenStreetMap соблазнительны, но политика использования тайлов требует видимого указания авторства, запрещает массовую загрузку, не даёт никаких гарантий работы и предупреждает коммерческие сервисы, что доступ может быть отозван. Для настоящего продукта используйте коммерческий или собственный источник тайлов, который работает с Leaflet.

API-ключи: публичные, но ограниченные

Ключи карт, используемые в браузере, видны любому, кто открывает вашу страницу. Это ожидаемо, но значит, что кто-то может скопировать ключ и накрутить использование за ваш счёт. Безопасность Google рекомендует добавить ограничения по HTTP-реферу со списком ваших доменов и ограничения по API, чтобы ключ работал только с нужными вам API.

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

Геокодирование: один раз превратите адреса в координаты

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

1. Когда объявление сохраняется, геокодируйте его адрес на сервере.
2. Сохраните широту и долготу в базе данных.
3. Карта читает сохранённые координаты; она никогда не геокодирует при просмотре страницы.

Условия провайдеров различаются по тому, как долго можно хранить результаты геокодирования, — проверьте их.

Примеры промптов

Одна встроенная карта:

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

Интерактивная карта объявлений:

Добавь в таблицу listings широту и долготу. Когда объявление создаётся или меняется его адрес, геокодируй его на сервере с ключом в GEOCODING_API_KEY и сохраняй координаты. На странице «Каталог» покажи карту с меткой для каждого объявления, используя Leaflet, с кластеризацией, когда метки перекрываются. По клику на метку показывай название, цену и ссылку. Карта и список должны использовать одни и те же фильтры.

«Рядом со мной»:

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

Пошагово

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

Частые ошибки

• Неограниченные ключи. Любой может использовать их на своём сайте.
• Геокодирование при каждом просмотре страницы. Медленно и дорого; геокодируйте один раз при сохранении.
• Забыть живой домен в ограничениях ключа. В предпросмотре работает, а в продакшене — пустой серый прямоугольник.
• Макеты только с картой. Метки без списка неудобны на маленьких экранах и недоступны для незрячих пользователей.
• Сотни меток без кластеризации. Нечитаемо и медленно.
• Отсутствие указания авторства. Большинство провайдеров карт и тайлов требуют его, а скрытие нарушает их условия.
• Запрос геолокации при загрузке страницы. Запрашивайте только по нажатию «Рядом со мной».

Чек-лист

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

Карты в Mythex

В Mythex нет встроенной интеграции с картами; вы используете собственный ключ провайдера, добавляете его как секрет проекта (или вставляете, когда агент покажет карточку секретов) и просите карту в чате, как описано в Интеграции любого API. Координаты хранятся в базе данных проекта. Не забудьте добавить и домен предпросмотра, и опубликованный домен в ограничения ключа по сайтам, и публикуйте приложение заново после изменения секретов.

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

Вопросы