Інтеграція 1С-Бітрікс з Google Maps

Інтеграція 1С-Бітрікс з Google Maps

Google Maps Platform — вибір для міжнародних проектів і сайтів, яким важливе коректне відображення за межами Росії. На відміну від Яндекс.Карт, Google Maps вимагає прив'язки платіжного методу навіть для безкоштовного використання в межах ліміту ($200/місяць безкоштовно ≈ 28 000 завантажень карти).

Підключення та ключ API

У Google Cloud Console створюємо проект, вмикаємо три API:

• Maps JavaScript API — відображення карти у frontend.
• Geocoding API — геокодування адрес на сервері.
• Places API — автодоповнення адреси при введенні.

Обмежуємо ключ: HTTP-реферер для JavaScript API (лише домен сайту), IP-адреса сервера для Geocoding/Places API. Це запобігає витоку квоти при крадіжці ключа.

Ключ зберігаємо в .env або COption::GetOptionString('site', 'gmaps_api_key') — не вставляємо безпосередньо в шаблони.

Ініціалізація карти

<div id="gmap" style="width:100%;height:400px"></div>
<script>
function initMap() {
    const coords = { lat: <?= $lat ?>, lng: <?= $lon ?> };
    const map = new google.maps.Map(document.getElementById('gmap'), {
        center: coords, zoom: 14,
        styles: googleMapStyles, // кастомні стилі для бренду
    });
    new google.maps.Marker({ position: coords, map: map, title: '<?= htmlspecialchars($title) ?>' });
}
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<?= $apiKey ?>&callback=initMap&language=ru&region=RU">
</script>

Параметри language=ru&region=RU забезпечують назви вулиць відповідною мовою та правильний формат адрес.

Серверне геокодування

function geocodeAddressGoogle(string $address): ?array {
    $apiKey = COption::GetOptionString('site', 'gmaps_server_key');
    $url = 'https://maps.googleapis.com/maps/api/geocode/json?'
         . 'address=' . urlencode($address)
         . '&key=' . $apiKey . '&language=ru&region=RU';

    $http = new \Bitrix\Main\Web\HttpClient();
    $data = json_decode($http->get($url), true);

    if ($data['status'] !== 'OK') return null;

    $loc = $data['results'][0]['geometry']['location'];
    return ['lat' => $loc['lat'], 'lon' => $loc['lng']];
}

Ліміти: Geocoding API — 40 000 запитів/місяць безкоштовно. При імпорті великого довідника адрес додаємо затримку 50 мс між запитами і кешуємо результати в b_cached_files на 30 днів.

Автодоповнення адреси через Places API

На сторінці оформлення замовлення користувач починає вводити адресу — з'являється список підказок від Google Places. Після вибору координати підставляються в приховані поля і передаються в обробник доставки.

const input = document.getElementById('delivery-address');
const autocomplete = new google.maps.places.Autocomplete(input, {
    types: ['address'],
    componentRestrictions: { country: ['ru', 'by', 'kz'] },
    fields: ['geometry', 'formatted_address', 'address_components'],
});

autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace();
    document.getElementById('lat').value = place.geometry.location.lat();
    document.getElementById('lon').value = place.geometry.location.lng();
    // Парсимо address_components для окремих полів (місто, вулиця, будинок)
    parseAddressComponents(place.address_components);
});

Кластеризація маркерів

Для карти з десятками точок (магазини, дилери) використовуємо бібліотеку @googlemaps/markerclusterer:

import { MarkerClusterer } from '@googlemaps/markerclusterer';

const markers = storesData.map(store => new google.maps.Marker({
    position: { lat: store.lat, lng: store.lon },
    title: store.name,
}));
new MarkerClusterer({ map, markers });

Дані магазинів передаємо з PHP в JS через json_encode() на сторінці або через Ajax-запит до компонента при першому завантаженні карти.

Вартість і моніторинг

У Google Cloud Console налаштовуємо сповіщення про бюджет. Перевищення ліміту $200 — API починає повертати помилки OVER_QUERY_LIMIT. Для контролю додаємо логування всіх серверних запитів до Geocoding API з підрахунком денної квоти.