Не работает карта Google на сайте 1С-Битрикс: разбор всех ошибок Maps JavaScript API
Серый прямоугольник вместо карты и сообщение «При загрузке Google Карт на этой странице возникла проблема» — типовая ситуация после запуска сайта. У неё около десяти разных причин, и каждая пишет в консоль свой код ошибки. Разбираем, как определить свою за минуту.
Содержание
Симптом всегда одинаковый: на странице контактов вместо карты серая заливка, иногда поверх неё — модальное окно «При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдёте в консоли JavaScript». Само сообщение ничего не говорит о причине. Причина — в консоли.
Шаг 1. Прочитать код ошибки в консоли
Откройте страницу контактов, нажмите F12, вкладка Console, перезагрузите страницу. Среди сообщений будет строка вида Google Maps JavaScript API error: <КодОшибки>. Этот код — точный диагноз, дальше остаётся выполнить соответствующее действие.
Шаг 2. Найти свой код в таблице
| Код ошибки | Что произошло | Что делать |
|---|---|---|
MissingKeyMapError | В скрипте загрузки API вообще нет ключа | Получить ключ в Google Cloud Console и вписать его в настройки компонента карты |
InvalidKeyMapError | Ключ передан, но система его не находит | Проверить, что скопирован весь ключ без пробелов; при необходимости сгенерировать новый |
ExpiredKeyMapError | Ключ истёк или ещё не распознан системой | Если ключ только что создан — подождать несколько минут; если старый — выпустить новый |
RefererNotAllowedMapError | Домен, с которого грузится карта, не в списке разрешённых источников | Добавить домен в ограничения ключа в Cloud Console |
ApiNotActivatedMapError | В проекте не включён Maps JavaScript API | Включить нужный API в разделе APIs & Services проекта |
ApiTargetBlockedMapError | Ключ не авторизован для этого API | Проверить ограничения ключа по API и добавить Maps JavaScript API в список разрешённых |
BillingNotEnabledMapError | На проекте не включён биллинг | Привязать платёжный аккаунт к проекту |
OverQuotaMapError | Превышен лимит запросов | Дождаться сброса суточной квоты или поднять лимиты; проверить, не утёк ли ключ |
DeletedApiProjectMapError | Проект, в котором создан ключ, удалён | Создать новый проект и новый ключ |
MalformedCredentialsMapError | Ключ передан в некорректном формате | Проверить строку подключения API |
TOSViolationMapError | Нарушены условия использования сервиса | Разбираться в поддержке Google, ключ заблокирован |
Коды и их значения приведены по официальной справке Google для Maps JavaScript API — она остаётся первоисточником, если ваш код в таблицу не попал.
Шаг 3. Получить и правильно ограничить ключ
Порядок действий в Google Cloud Console:
- Создайте проект (или выберите существующий) и перейдите в раздел APIs & Services → Credentials.
- Создайте учётные данные типа API key. Скопируйте выданное значение.
- В настройках ключа задайте ограничение по приложению: тип «Websites», а в список разрешённых источников добавьте обе схемы вашего домена —
https://ваш-сайт.ru/*иhttp://ваш-сайт.ru/*. Для поддоменов —https://*.ваш-сайт.ru/*. - Задайте ограничение по API: оставьте только те сервисы, которые реально используете, как минимум Maps JavaScript API.
- В разделе APIs & Services → Library включите Maps JavaScript API для проекта.
- В разделе Billing привяжите платёжный аккаунт к проекту.
OverQuotaMapError на ровном месте. Ограничение по домену обязательно.Шаг 4. Вписать ключ в решение
В решениях Аспро карта на странице контактов выводится компонентом, у которого есть отдельное поле для ключа:
- Войдите в админку и включите режим правки на публичной части.
- Наведите курсор на блок с картой, откройте меню компонента и выберите настройки.
- Найдите поле для ключа Google JavaScript API и вставьте значение.
- Сохраните и сбросьте кэш: *Настройки → Настройки продукта → Автокэширование → очистить файлы кэша*. Без сброса кэша страница может отдаваться старой.
Проверьте результат в приватном окне браузера: обычное окно часто показывает закэшированный вариант страницы.
Если оплатить Google из России не получается
С 2018 года Maps JavaScript API требует активного платёжного аккаунта. Если карту привязать не удаётся, карта на сайте либо не запустится, либо будет отображаться с водяным знаком «For development purposes only», что выглядит как сломанный блок.
Рабочая альтернатива — Яндекс Карты. В решениях Аспро тип карты переключается в настройках того же компонента, менять вёрстку не нужно:
- Получите API-ключ JavaScript API в кабинете разработчика Яндекс Карт.
- В настройках компонента карты выберите тип «Яндекс» и вставьте ключ.
- Задайте координаты точки и масштаб, сохраните, сбросьте кэш.
Подключение Яндекс JS API выглядит так — параметр ключа передаётся прямо в адресе скрипта:
<script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_КЛЮЧ&lang=ru_RU" type="text/javascript"></script>
Для страницы контактов возможностей Яндекс Карт достаточно: метка, подпись, зум, маршрут до офиса. Для аудитории из России этот вариант к тому же грузится быстрее.
Ошибки в консоли нет, а карты нет
Если в консоли чисто, проверьте по порядку:
- Контейнер нулевой высоты. Карта вставляется в блок, у которого не задана высота — API отрабатывает, но рисовать некуда. Проверьте инспектором высоту контейнера карты.
- Блок скрыт вкладкой или аккордеоном. Если карта инициализируется в скрытом контейнере, она рисуется в размер 0×0. Лечится инициализацией после показа блока или принудительным
container.fitToViewport()у Яндекса. - Блокировщик рекламы или расширение приватности. Проверьте страницу в приватном окне с отключёнными расширениями.
- Смешанный контент. Сайт работает по HTTPS, а скрипт карты подключён по
http://— браузер блокирует запрос. В консоли будет предупреждение Mixed Content. - Кэш решения. Аспро кэширует включаемые области. После правки настроек всегда сбрасывайте кэш сайта.
Короткий чек-лист
- Ключ создан, вставлен в настройки компонента, кэш сброшен.
- Maps JavaScript API включён в проекте, биллинг активен.
- В ограничениях ключа перечислены все домены сайта, включая
wwwи поддомены. - На странице контактов нет смешанного контента, у контейнера карты есть высота.
- Если платёж Google недоступен — блок переключён на Яндекс Карты.
Частые вопросы
Где в решении Аспро вводится ключ Google Maps?
В настройках компонента карты на странице контактов: включите режим правки, наведите на блок карты, откройте настройки компонента и найдите поле для ключа JavaScript API. После сохранения сбросьте кэш сайта.
Карта работала, а после переноса сайта на новый домен перестала. Почему?
Скорее всего сработало ограничение по источнику перехода: в ключе разрешён старый домен. Ошибка в консоли — RefererNotAllowedMapError. Добавьте новый домен в список разрешённых HTTP-referrer в Google Cloud Console.
Обязательно ли привязывать банковскую карту к Google Cloud?
Да, с 2018 года Maps JavaScript API работает только на проекте с включённым биллингом. Без него карта отдаёт BillingNotEnabledMapError независимо от объёма трафика.
Что делать, если оплатить Google из России не получается?
Переключить блок карты на Яндекс Карты — в решениях Аспро тип карты выбирается в настройках того же компонента, нужен только API-ключ Яндекса. Функционально для страницы контактов разницы нет.
Карта отображается, но с надписью «For development purposes only».
Это не ошибка кода, а водяной знак: биллинг на проекте не активирован или превышен бесплатный лимит. Карта продолжает работать, но выглядит нерабочей для посетителя.
Не хотите разбираться сами?
Настроим, обновим и почистим сайт на 1С-Битрикс. Официальный партнёр Битрикс и Аспро, 20 лет в разработке.
Оставить заявку 8 (800) 555-31-56