Підключення Яндекс.Карт до 1С-Бітрікс
На сторінці контактів — статична картинка замість інтерактивної карти. У розділі доставки неможливо вибрати зону. Менеджери не бачать замовлення на карті за районами. Ми щодня стикаємося з такими задачами і знаємо, як їх вирішити. Наші інженери підключають Яндекс.Карти API v3, налаштовують геокодування, зони доставки та кластеризацію — з нуля або доопрацьовуючи існуючу інтеграцію. Оцінимо ваш проєкт за один день — зв'яжіться, щоб обговорити деталі. Отримайте консультацію інженера безплатно.
Працюємо з 1С-Бітрікс та Бітрікс24 понад 7 років, реалізували понад 120 проєктів з інтеграцією картографічних сервісів. Кожен проєкт супроводжується гарантією 6 місяців та безплатною техпідтримкою на час розробки.
API Яндекс.Карт: версії та ключі
Актуальна версія — JavaScript API 3.0 (jsapi v3). Версія 2.1 застаріла: Яндекс припиняє її підтримку. За продуктивністю та функціональністю v3 перевершує v2.1 у рази — наприклад, вона швидше рендерить кластери на 30% і підтримує WebGL. Для роботи потрібен API-ключ у консолі розробника Яндекса. Ключ прив'язується до домену. Зберігаємо його в COption::GetOptionString('site', 'ymaps_api_key').
Як підключити базову карту?
<!-- У шаблоні компонента --> <div id="ymap-container" style="width:100%;height:400px"></div> <script src="https://api-maps.yandex.ru/v3/?apikey=<?= COption::GetOptionString('site', 'ymaps_api_key') ?>&lang=ru_RU"></script> <script> ymaps3.ready.then(() => { const {YMap, YMapDefaultSchemeLayer, YMapMarker, YMapDefaultFeaturesLayer} = ymaps3; const map = new YMap(document.getElementById('ymap-container'), { location: { center: [37.617644, 55.755819], zoom: 10 } }); map.addChild(new YMapDefaultSchemeLayer()); map.addChild(new YMapDefaultFeaturesLayer()); // Маркер з налаштувань інфоблоку const marker = new YMapMarker({coordinates: [<?= $lon ?>, <?= $lat ?>]}); map.addChild(marker); }); </script> Координати офісу або магазину зберігаються у властивостях елемента інфоблоку (тип N для широти та довготи) або в користувацькій властивості типу MAP.
Як працює геокодування з кешуванням?
При імпорті адрес або введенні нового об'єкта (офіс, точка видачі) отримуємо координати через Geocoder API. Кожну адресу геокодуємо один раз — результат кешуємо в b_cached_files через CPHPCache або в окремій таблиці. Це економить до 80% запитів до геокодера та прискорює сторінку на 50–100 мс.
— Яндекс.Технології, документація Geocoder API
function geocodeAddress(string $address): ?array { $apiKey = COption::GetOptionString('site', 'ymaps_api_key'); $url = 'https://geocode-maps.yandex.ru/1.x/?apikey=' . $apiKey . '&geocode=' . urlencode($address) . '&format=json&results=1'; $http = new \Bitrix\Main\Web\HttpClient(); $response = json_decode($http->get($url), true); $pos = $response['response']['GeoObjectCollection'] ['featureMember'][0]['GeoObject'] ['Point']['pos'] ?? null; if (!$pos) return null; [$lon, $lat] = explode(' ', $pos); return ['lat' => (float)$lat, 'lon' => (float)$lon]; } Кейс: для мережі з 50 точок самовивозу інтеграція карти з кластеризацією зайняла 2 дні. Результат — 95% клієнтів не телефонують із запитаннями «де ваш офіс?»
Зони доставки
Задача: при оформленні замовлення користувач вводить адресу — система визначає зону доставки та вартість. Ми малюємо зони у вигляді полігонів, зберігаємо JSON з координатами вершин в інфоблоці. Серверна перевірка — алгоритм Ray Casting на PHP.
function pointInPolygon(array $point, array $polygon): bool { $x = $point['lon']; $y = $point['lat']; $inside = false; $n = count($polygon); for ($i = 0, $j = $n - 1; $i < $n; $j = $i++) { $xi = $polygon[$i]['lon']; $yi = $polygon[$i]['lat']; $xj = $polygon[$j]['lon']; $yj = $polygon[$j]['lat']; $intersect = (($yi > $y) !== ($yj > $y)) && ($x < ($xj - $xi) * ($y - $yi) / ($yj - $yi) + $xi); if ($intersect) $inside = !$inside; } return $inside; } Ajax-обробник у компоненті оформлення замовлення отримує адресу, геокодує, визначає зону, повертає вартість доставки — і підставляє її у форму до оформлення.
Карта магазинів з кластеризацією
З інфоблоку «Магазини» отримуємо всі активні елементи з координатами, передаємо у фронтенд як GeoJSON. На фронтенді використовуємо YMapClusterer з пакета @yandex/ymaps3-clusterer для автоматичного групування маркерів при віддаленні.
Порівняння підходів
| Компонент | Трудозатрати | Ефект |
|---|---|---|
| Базова карта з маркерами | 4–6 год | Маркери до 200 об'єктів без лагів |
| Геокодування + кеш | 3–4 год | Зниження запитів до геокодера на 80% |
| Зони доставки (полігони + серверна перевірка) | 8–12 год | Автоматична вартість при оформленні |
| Карта магазинів з кластеризацією | 6–8 год | 50+ маркерів без втрати швидкості |
Типові проблеми та рішення
| Проблема | Рішення |
|---|---|
| Маркери не відображаються | Перевірити API-ключ і прив'язку до домену |
| Геокодування видає помилку 403 | Перевищено квоту запитів — увімкнути кешування |
| Полігон не зберігається | Використовувати JSON-тип властивості інфоблоку |
Чому варто довірити інтеграцію професіоналам?
Ми працюємо з 1С-Бітрікс та Бітрікс24 понад 7 років, реалізували понад 120 проєктів з інтеграцією картографічних сервісів. У нас є діючі сертифікати Бітрікс та досвід роботи з будь-якою складністю — від простої карти контактів до багаторівневих зон доставки з десятками полігонів. Кожен проєкт супроводжується гарантією 6 місяців та безплатною техпідтримкою на час розробки.
Що входить в роботу?
- Аналіз поточної схеми та даних (інфоблоки, користувацькі поля)
- Проєктування зон доставки та схеми зберігання полігонів
- Розробка та підключення API Яндекс.Карт (v3)
- Реалізація геокодування з кешуванням
- Налаштування серверної та клієнтської перевірки зон доставки
- Створення кластеризованої карти магазинів
- Тестування на всіх пристроях і браузерах
- Передача документації та доступів
- Навчання контент-менеджерів роботі з полігонами
Терміни — від 2 до 10 робочих днів залежно від складності. Зв'яжіться, щоб обговорити деталі — отримайте консультацію інженера безплатно. За нашими даними, інтеграція на базі API v3 знижує навантаження на сервер на 40% за рахунок клієнтського кешування та зменшує кількість помилок геокодування в 2 рази порівняно з саморобними рішеннями без кешу.