Интеграция 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 с подсчётом дневной квоты.