Connecting Yandex.Maps to 1C-Bitrix
Your contact page shows a static image instead of an interactive map. The delivery section can't pick zones. Managers can't see orders on a map by districts. We deal with these tasks daily and know how to solve them. Our engineers integrate Yandex.Maps API v3, configure geocoding, delivery zones, and clustering — from scratch or by improving existing integrations. We'll assess your project in one day — contact us to discuss details. Get a free engineer consultation.
We've been working with 1C-Bitrix and Bitrix24 for over 7 years, completing more than 120 projects with map service integration. Every project comes with a 6-month warranty and free technical support during development.
Yandex.Maps API: Versions and Keys
The current version is JavaScript API 3.0 (jsapi v3). Version 2.1 is deprecated: Yandex is ending support. In performance and functionality, v3 outperforms v2.1 significantly — for example, it renders clusters 30% faster and supports WebGL. You need an API key from the Yandex Developer Console. The key is bound to a domain. We store it in COption::GetOptionString('site', 'ymaps_api_key').
How to Connect a Basic Map?
<!-- В шаблоне компонента --> <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> Office or store coordinates are stored in infoblock element properties (type N for latitude and longitude) or in a custom MAP property.
How Geocoding with Caching Works
When importing addresses or entering a new object (office, pickup point), we obtain coordinates via the Geocoder API. Each address is geocoded once — the result is cached in b_cached_files via CPHPCache or in a separate table. This saves up to 80% of geocoder requests and speeds up the page by 50–100 ms.
— Yandex.Technologies, Geocoder API documentation
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]; } Case study: For a network of 50 pickup points, integrating a clustered map took 2 days. Result — 95% of customers no longer call asking "where is your office?".
Delivery Zones
Task: During checkout, the user enters an address — the system determines the delivery zone and cost. We draw zones as polygons, save JSON with vertex coordinates in an infoblock. Server-side check uses the Ray Casting algorithm in 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; } An Ajax handler in the checkout component gets the address, geocodes it, determines the zone, returns the delivery cost — and inserts it into the form before completion.
Store Locator with Clustering
From the "Stores" infoblock, we retrieve all active elements with coordinates and pass them to the frontend as GeoJSON. On the frontend we use YMapClusterer from the @yandex/ymaps3-clusterer package for automatic marker grouping when zooming out.
Comparison of Approaches
| Component | Effort | Effect |
|---|---|---|
| Basic map with markers | 4–6 h | Markers for up to 200 objects without lag |
| Geocoding + caching | 3–4 h | 80% reduction in geocoder requests |
| Delivery zones (polygons + server check) | 8–12 h | Automatic cost at checkout |
| Store map with clustering | 6–8 h | 50+ markers without performance loss |
Typical Problems and Solutions
| Problem | Solution |
|---|---|
| Markers not displayed | Check API key and domain binding |
| Geocoding returns error 403 | Request quota exceeded — enable caching |
| Polygon not saved | Use JSON property type in infoblock |
Why Trust Professionals with Integration?
We've been working with 1C-Bitrix and Bitrix24 for over 7 years, completing more than 120 projects with map service integration. We hold active Bitrix certificates and have experience with any complexity — from a simple contact map to multi-level delivery zones with dozens of polygons. Every project comes with a 6-month warranty and free technical support during development.
What's Included?
- Analysis of current schema and data (infoblocks, user fields)
- Designing delivery zones and polygon storage scheme
- Developing and connecting Yandex.Maps API (v3)
- Implementing geocoding with caching
- Configuring server-side and client-side delivery zone checks
- Creating a clustered store map
- Testing on all devices and browsers
- Handing over documentation and access
- Training content managers on working with polygons
Timelines — from 2 to 10 working days depending on complexity. Contact us to discuss details — get a free engineer consultation. According to our data, integration on API v3 reduces server load by 40% due to client-side caching and reduces geocoding errors by 2 times compared to self-made solutions without caching.