Найти в Дзене
ИРС - digital agency

Как добавить карту и геолокацию в мини-приложение во ВКонтакте

Где ближайший магазин? Как найти точку самовывоза рядом? А если пользователь хочет пройти городской квест? Во всех этих сценариях нужны карты и геолокация. А если ваше приложение работает во ВКонтакте, то всё это можно сделать удобно, красиво и быстро. Наша команда занимается разработкой VK Mini Apps — и мы точно знаем, как сделать так, чтобы приложение показывало карту, определяло местоположение и помогало пользователю. Геолокация помогает: Во ВКонтакте есть VK Bridge — с его помощью можно запросить геопозицию: bridge.send('VKWebAppGetGeodata', {}) В ответ приходят координаты. Но: ❌ Google Maps — не подойдёт: нужен только российский сервис.
✅ Яндекс.Карты — отличный выбор. Работает быстро, красиво, понятно. Также можно использовать 2ГИС или Sputnik, но мы рекомендуем Яндекс.Карты. В коде приложения добавляется карта через специальный скрипт: <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> А дальше на странице появляется карта с точкой, например, ближайшего магазин
Оглавление

Где ближайший магазин? Как найти точку самовывоза рядом? А если пользователь хочет пройти городской квест? Во всех этих сценариях нужны карты и геолокация. А если ваше приложение работает во ВКонтакте, то всё это можно сделать удобно, красиво и быстро.

Наша команда занимается разработкой VK Mini Apps — и мы точно знаем, как сделать так, чтобы приложение показывало карту, определяло местоположение и помогало пользователю.

Зачем это нужно

Геолокация помогает:

  • показывать ближайшие точки;
  • строить маршрут до магазина;
  • определять, доступна ли доставка по адресу;
  • делать квесты или конкурсы, где важна локация;
  • улучшать персонализацию: «События рядом с вами».

Как узнать, где находится пользователь

Во ВКонтакте есть VK Bridge — с его помощью можно запросить геопозицию:

bridge.send('VKWebAppGetGeodata', {})

В ответ приходят координаты. Но:

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

Какую карту встроить

❌ Google Maps — не подойдёт: нужен только российский сервис.
✅ Яндекс.Карты — отличный выбор. Работает быстро, красиво, понятно.

Также можно использовать 2ГИС или Sputnik, но мы рекомендуем Яндекс.Карты.

Как вставить карту

В коде приложения добавляется карта через специальный скрипт:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

А дальше на странице появляется карта с точкой, например, ближайшего магазина.

На что обратить внимание

  • 📍 Не запрашивайте гео сразу — сначала объясните зачем.
  • 🧭 Дайте пользователю выбрать город вручную.
  • ⚡ Оптимизируйте карту — особенно на мобильных.
  • 🔐 Не собирайте координаты без причины.

Что можно сделать с картой в мини-приложении

  • Показывать все точки на карте;
  • Добавлять фильтры — «сейчас открыто», «есть самовывоз»;
  • Делать квесты с точками в городе (реально работает!);
  • Подсвечивать активную зону доставки.

Вывод

Карты и гео делают мини-приложения во ВКонтакте полезнее. С их помощью можно не только продать товар, но и помочь пользователю, вовлечь его в игру, улучшить сервис.

Мы создаём VK Mini Apps с геолокацией и картами — только на российских платформах и с заботой о пользователях. Хотите карту в своём приложении? Мы поможем.