Как подключить Яндекс.Карты после согласия на cookie

Яндекс.Карты часто используются на сайтах компаний: в разделе «Контакты», на странице офиса, магазина, пункта выдачи или схемы проезда. Но если сайт использует cookie-баннер и блокирует сторонние скрипты до выбора пользователя, карту нельзя просто оставить подключенной как обычный JavaScript-код.

Причина в том, что Яндекс.Карты — это внешний скрипт, который загружается с серверов Яндекса. Если на сайте настроено получение согласия перед загрузкой сторонних сервисов, карту нужно запускать только после того, как пользователь дал согласие на соответствующую категорию cookie.

Почему Яндекс.Карта может не работать после настройки cookie-баннера

Частая ошибка — заблокировать только внешний скрипт Яндекс.Карт, но оставить на странице код инициализации карты. В таком случае браузер пытается выполнить команду создания карты раньше, чем загрузилась библиотека Яндекса.

Например, на странице может быть такой код: 

<script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU"></script> <script> ymaps.ready(function () { var map = new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 16 }); }); </script>

Если cookie-баннер заблокировал первый скрипт, объект ymaps еще не существует. В результате карта не появляется, а в консоли браузера может быть ошибка вида: 

ymaps is not defined

Поэтому при подключении Яндекс.Карт после согласия важно соблюдать правильный порядок:

  • сначала пользователь дает согласие на нужную категорию;
  • после согласия загружается внешний скрипт API Яндекс.Карт;
  • после загрузки API вызывается ymaps.ready(...);
  • только после этого создается карта.

К какой категории cookie отнести Яндекс.Карты

В большинстве случаев Яндекс.Карты логично относить к категории «Функциональные» или «Маркетинговые/сторонние сервисы» — в зависимости от того, как устроена политика cookie на конкретном сайте.

Если карта нужна только для отображения адреса и схемы проезда, ее обычно относят к функциональным сервисам. Если вместе с картой используются дополнительные рекламные, аналитические или поведенческие инструменты, может потребоваться отдельная категория или дополнительное описание в политике cookie.

В любом случае в cookie-баннере и политике cookie желательно указать, что на сайте используется Яндекс.Карта или JavaScript API Яндекс.Карт для отображения интерактивной карты и схемы проезда.

Правильная схема подключения Яндекс.Карт после согласия

Ниже приведен универсальный пример. Он подходит для ситуации, когда карта должна появиться только после согласия пользователя на загрузку сторонних сервисов.

1. Добавьте контейнер для карты

На странице, где должна быть карта, оставьте обычный HTML-контейнер: 

<div id="map" style="width: 100%; height: 400px;"></div>

До согласия пользователя можно дополнительно показать заглушку: 

<div id="map-placeholder"> Для отображения карты необходимо согласие на использование функциональных cookie и сторонних сервисов. </div> <div id="map" style="width: 100%; height: 400px; display: none;"></div>

2. Используйте отложенную загрузку API Яндекс.Карт

Не подключайте скрипт Яндекс.Карт сразу в коде страницы. Вместо этого загрузите его динамически после согласия: 

<script> (function () { var yandexMapLoaded = false; window.loadYandexMapAfterConsent = function () { if (yandexMapLoaded) { return; } yandexMapLoaded = true; var script = document.createElement('script'); script.src = 'https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU'; script.type = 'text/javascript'; script.onload = function () { if (typeof ymaps !== 'undefined') { ymaps.ready(initYandexMap); } }; document.head.appendChild(script); }; function initYandexMap() { var placeholder = document.getElementById('map-placeholder'); var mapContainer = document.getElementById('map'); if (placeholder) { placeholder.style.display = 'none'; } if (mapContainer) { mapContainer.style.display = 'block'; } var map = new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 16, controls: ['zoomControl', 'fullscreenControl'] }); var placemark = new ymaps.Placemark([55.751574, 37.573856], { balloonContent: 'Наш офис' }); map.geoObjects.add(placemark); } })(); </script>

В этом примере нужно заменить:

  • ВАШ_API_КЛЮЧ — на API-ключ Яндекс.Карт;
  • [55.751574, 37.573856] — на координаты вашей организации;
  • Наш офис — на название компании, адрес или текст подсказки.

Как запускать карту через CookieФЗ

В CookieФЗ нужно настроить загрузку карты после согласия пользователя на выбранную категорию. Обычно схема такая:

  1. В личном кабинете CookieФЗ откройте настройки сайта.
  2. Перейдите к настройкам cookie-виджета и категорий cookie.
  3. Создайте или выберите категорию, к которой будет относиться Яндекс.Карта.
  4. Добавьте описание сервиса: «Яндекс.Карты — отображение интерактивной карты и схемы проезда».
  5. В поле для кода, который выполняется после согласия, добавьте вызов функции:
loadYandexMapAfterConsent();

Важно: сам внешний скрипт Яндекс.Карт не должен загружаться до согласия пользователя. Поэтому не оставляйте на странице обычное подключение вида: 

<script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU"></script>

Такой скрипт нужно удалить из исходного шаблона страницы и загружать только после согласия.

Пример полного кода для страницы контактов

Ниже пример кода, который можно использовать на странице «Контакты». Он показывает заглушку до согласия, а после согласия загружает Яндекс.Карту. 

<div id="map-placeholder" style="padding: 20px; border: 1px solid #ddd; background: #f7f7f7;"> Для отображения интерактивной карты необходимо согласие на использование функциональных cookie и сторонних сервисов. </div> <div id="map" style="width: 100%; height: 400px; display: none;"></div> <script> (function () { var yandexMapLoaded = false; window.loadYandexMapAfterConsent = function () { if (yandexMapLoaded) { return; } yandexMapLoaded = true; var script = document.createElement('script'); script.src = 'https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU'; script.type = 'text/javascript'; script.onload = function () { if (typeof ymaps !== 'undefined') { ymaps.ready(initYandexMap); } }; document.head.appendChild(script); }; function initYandexMap() { var placeholder = document.getElementById('map-placeholder'); var mapContainer = document.getElementById('map'); if (placeholder) { placeholder.style.display = 'none'; } if (mapContainer) { mapContainer.style.display = 'block'; } var map = new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 16, controls: ['zoomControl', 'fullscreenControl'] }); var placemark = new ymaps.Placemark([55.751574, 37.573856], { hintContent: 'Наша компания', balloonContent: 'Адрес компании' }); map.geoObjects.add(placemark); map.behaviors.disable('scrollZoom'); } })(); </script>

Что делать, если карта не появилась

Если после согласия пользователя карта не отображается, проверьте несколько моментов.

1. API-ключ Яндекс.Карт

Убедитесь, что в коде указан действующий API-ключ: 

apikey=ВАШ_API_КЛЮЧ

Без корректного ключа карта может не загрузиться или работать с ошибками.

2. Скрипт не должен загружаться дважды

Если Яндекс.Карты уже подключены в шаблоне сайта, а CookieФЗ дополнительно загружает их после согласия, возможен конфликт. На странице должен быть один управляемый сценарий подключения.

3. Инициализация должна запускаться после загрузки API

Нельзя вызывать создание карты до загрузки API. Правильный вариант: 

script.onload = function () { ymaps.ready(initYandexMap); };

Неправильный вариант: 

ymaps.ready(initYandexMap);

если перед этим API Яндекс.Карт еще не был загружен.

4. Проверьте ID контейнера

ID контейнера в HTML должен совпадать с ID в коде: 

<div id="map"></div> new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 16 });

5. Проверьте консоль браузера

Откройте инструменты разработчика в браузере и проверьте вкладку Console. Если там есть ошибка ymaps is not defined, значит код инициализации карты выполняется раньше, чем загрузился API Яндекс.Карт.

Как описать Яндекс.Карты в политике cookie

В политике cookie можно добавить описание примерно такого вида:

На сайте может использоваться сервис Яндекс.Карты для отображения интерактивной карты, схемы проезда и информации о местоположении компании. Загрузка карты осуществляется после согласия пользователя на соответствующую категорию cookie/сторонних сервисов, если такое согласие требуется настройками сайта.

Формулировку следует адаптировать под фактические настройки сайта, используемые сервисы и документы компании.

Итог

Яндекс.Карты можно корректно подключить вместе с cookie-баннером, но важно не загружать API карты до согласия пользователя. Правильная схема — оставить на странице контейнер и заглушку, а внешний скрипт Яндекс.Карт инициализировать только после выбора пользователя.

CookieФЗ позволяет управлять загрузкой сторонних скриптов и подключать такие сервисы, как Яндекс.Метрика, рекламные пиксели, онлайн-чаты и Яндекс.Карты, только после согласия пользователя на выбранные категории cookie.