Карта Google на странице контактов не загружается — как починить

Если карта Google на сайте не загружается, сначала посмотрите, что видно на её месте. Затемнённая карта с надписью «For development purposes only» или окно «При загрузке Google Карт на этой странице возникла проблема» означают, что Google отклонил запрос с вашим ключом API: не включена оплата в проекте Google Cloud, сайта нет в списке разрешённых, не включён нужный API или ключ неверный. Точную причину называет код ошибки в консоли браузера. Пустой серый блок без сообщений обычно говорит о проблеме в вёрстке или о баннере cookie. А если вам нужна просто карта с адресом компании, ключ API не нужен вовсе: код из Google Карт (Поделиться → Встраивание карт) бесплатный и от оплаты не зависит.

Ниже — таблица для быстрой диагностики, расшифровка кодов ошибок из консоли браузера и пошаговая инструкция для обоих вариантов: с ключом и без него. Почти всегда это мелкая ошибка настройки, а не поломка, на которую уйдут дни.

Быстрая диагностика: что видно вместо карты

Сначала узнайте, каким способом вставлена карта

От этого зависит решение. Способов три, и только первый обходится без ключа:

Как это посмотреть: откройте страницу контактов в Chrome, кликните правой кнопкой по области карты и выберите «Просмотреть код» (или нажмите F12). Во вкладке Elements («Элементы») нажмите Ctrl+F (на Mac — Cmd+F) и поищите maps/embed и maps/api/js. Потом откройте вкладку Console («Консоль»): красные сообщения от Google называют точный код ошибки — запишите его, он понадобится в следующем разделе.

Подсказка без консоли: если в настройках блока карты в теме, плагине или конструкторе есть поле для ключа (например, «Google Map API Key»), карта работает через ключ API — чаще всего через JavaScript API. Так устроен, например, стандартный блок карты Google в Tilda.

Важная деталь про Maps Embed API: сами запросы к нему бесплатны и не ограничены по количеству, но чтобы получить ключ, нужен проект в Google Cloud с настроенным платёжным аккаунтом. Код из Google Карт без ключа ничего этого не требует.

Расшифровка ошибок из консоли

Если карта работает через ключ, Google сам пишет в консоли, что не так. Основные коды:

• BillingNotEnabledMapError (на карте обычно затемнение и «For development purposes only») — в проекте не включена оплата. Её нужно включить, даже если вы укладываетесь в бесплатный месячный объём.
• RefererNotAllowedMapError — адрес текущей страницы не входит в список сайтов, разрешённых для ключа. Типичные поводы: сменили домен, перешли на HTTPS, сайт открывается с www, а в списке он без www, или вы проверяете тестовую копию на другом поддомене.
• ApiNotActivatedMapError — в проекте не включён Maps JavaScript API.
• ApiTargetBlockedMapError — у ключа включены ограничения по API, и Maps JavaScript API в разрешённый список не попал.
• MissingKeyMapError — в подключении скрипта карты вообще нет параметра key. Так бывает, например, после переноса сайта или обновления темы, когда поле ключа осталось пустым.
• InvalidKeyMapError или ExpiredKeyMapError — Google не находит или не распознаёт ключ: он скопирован не полностью, удалён или с опечаткой. Сверьте ключ в консоли Google Cloud или создайте новый.
• DeletedApiProjectMapError — проект, к которому относился ключ, удалён. Нужен новый проект и новый ключ.
• OverQuotaMapError — число запросов превысило лимиты использования Maps JavaScript API. Запросы снова заработают после ежедневного сброса квоты; если ошибка повторяется, проверьте квоты в консоли Google Cloud.
• InvalidClientIdMapError — старый сайт подключает карту через client ID (параметр client вместо key). Google объявил client ID устаревшими 26 мая 2025 года, а после 31 мая 2026 года они больше не работают, поэтому нужно перейти на обычный ключ API.

Полный список с пояснениями — в документации Google по ошибкам Maps JavaScript API.

Самый простой выход: бесплатный код из Google Карт без ключа

Если на странице контактов нужна только карта с вашей меткой, с которой клиент одним нажатием открывает маршрут, ключ API не нужен. Такой код не зависит от оплаты, не ломается при смене ключа и не выдаёт ошибок биллинга. Мы советуем этот вариант большинству небольших компаний: поставили один раз — и забыли.

• Шаг 1. Откройте Google Карты на компьютере и найдите название компании (лучше всего — ваш профиль компании в Google), а не просто адрес. Тогда метка покажет именно вас, а не безымянную точку на улице.
• Шаг 2. В карточке компании нажмите Поделиться и откройте вкладку Встраивание карт. Если нужна просто область карты, откройте меню в левом верхнем углу, выберите Ссылка/код и перейдите на вкладку Встраивание карт.
• Шаг 3. Выберите размер и нажмите Копировать HTML.
• Шаг 4. Вставьте код на страницу контактов вместо старой карты — в HTML-блок вашей CMS или конструктора: в WordPress это блок «Произвольный HTML», в Tilda — HTML-блок T123.
• Шаг 5. Чтобы карта нормально выглядела на телефоне, поменяйте в коде ширину на 100%, а высоту оставьте в пикселях. По документации Google встроенные карты меньше 200 пикселей по любой из сторон не поддерживаются.

Обычная ссылка на Google Карты из адресной строки браузера в iframe работать не будет: Google не разрешает показывать сами Карты внутри чужих сайтов, и браузер блокирует такую рамку. Нужен именно код встраивания, в адресе которого есть maps/embed.

Ограничения этого варианта: одна метка, без своих стилей и без нескольких точек, а посетитель не может построить свой маршрут прямо на сайте. Если всё это нужно, оставайтесь на ключе API. Как вставить карту так, чтобы она ещё и не тормозила страницу, мы подробно разобрали в статье как правильно встроить Google Maps на сайт.

Если оставляете ключ API: проверьте по порядку

Иногда сайт уже построен на Maps JavaScript API (несколько точек, свои стили, поиск ближайшего офиса), и переделывать его нет смысла. Тогда пройдитесь по списку в консоли Google Cloud:

• Оплата. К проекту должен быть привязан платёжный аккаунт со способом оплаты (обычно банковской картой), иначе карта будет затемнена. С 1 марта 2025 года вместо ежемесячного кредита в 200 долларов у каждого платного SKU есть свой бесплатный месячный объём: например, для загрузок карты через Maps JavaScript API (SKU Dynamic Maps) это 10 000 загрузок в месяц, а платить нужно только за то, что сверх него. Но привязка оплаты обязательна в любом случае.
• Если привязать оплату не получается. Банковская карта не проходит или Google Cloud недоступен для вашей страны — например, в марте 2022 года Google перестал подключать к Google Cloud новых пользователей из России. Тогда переходите на бесплатный код встраивания без ключа или на другой картографический сервис: у Яндекс Карт и 2ГИС есть свои конструкторы карт для сайта.
• API включён. Среди включённых API проекта должен быть Maps JavaScript API (и Maps Embed API, если карта вставлена через embed/v1 с ключом).
• Разрешённые сайты. Откройте Credentials, выберите ключ и в ограничениях приложения (Application restrictions) выберите тип Websites. Чтобы покрыть весь сайт, добавьте две записи: «https://example.com/*» для адреса без www и «https://*.example.com/*» для www и других поддоменов. По документации Google запись со звёздочкой вместо поддомена разрешает все поддомены, а адрес нужно указывать целиком, вместе с https://.
• Ограничения по API. Если в настройках ключа включены ограничения по API (API restrictions), Maps JavaScript API должен быть в списке разрешённых.
• Политика referrer. Если на сайте стоит мета-тег referrer со значением no-referrer или same-origin, браузер не сообщает Google адрес сайта, и ключ с ограничением по сайтам может отклонять запросы. Для карт через Maps Embed API Google рекомендует добавить к iframe атрибут referrerpolicy со значением strict-origin-when-cross-origin.
• Смешанный контент. Если сайт работает на HTTPS, а скрипт или iframe карты подключён по http://, браузер его заблокирует. Все адреса должны начинаться с https://.
• Content Security Policy. Если на сайте настроен заголовок Content-Security-Policy, в нём должны быть разрешены домены Google (googleapis.com, gstatic.com, google.com, googleusercontent.com, ggpht.com), иначе браузер не загрузит скрипт или рамку карты. Какой домен в какую директиву добавить, указано в документации Google по CSP для Maps JavaScript API.

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

Серый или пустой блок: проблема в вёрстке, а не в Google

Если в консоли нет ошибок от Google, а карты всё равно не видно, дело обычно в самой странице:

• Нет высоты. Google прямо пишет, что высоту блока с картой нужно задавать явно. Если у контейнера высота 0, карта на странице есть, но её не видно. Пропишите высоту в коде iframe или в CSS.
• Фиксированная ширина. Если ширина в коде больше экрана телефона, карта обрезается или вылезает за край. Ставьте ширину 100%.
• Карта во вкладке, аккордеоне или всплывающем окне. Если карта не отображается только там, а в открытой части страницы тот же код работает, причина в скрипте темы или плагина, который показывает скрытый блок.
• Код пропал после переноса или обновления. При переезде сайта, смене шаблона или обновлении плагина код карты может удалиться, а поле ключа — обнулиться. Посмотрите в коде страницы, есть ли там карта вообще.

Карту видят не все: cookie, блокировщики, кеш

Бывает, что карта настроена правильно, но часть посетителей её не видит. Проверьте и это:

• Баннер согласия на cookie. Если у сайта есть посетители из ЕС, баннер по GDPR часто не загружает Google Карты до согласия на маркетинговые cookie. С точки зрения закона так и должно быть, но тот, кто отказался, остаётся без карты. Выход — заглушка с кнопкой «Показать карту» и адрес текстом рядом. Как настроить баннер без лишних потерь, мы разбирали в статье про правильный баннер cookies.
• Блокировщики рекламы. Некоторые расширения блокируют скрипты Google. Откройте страницу в режиме инкогнито без расширений: если там карта есть, причина в браузере, а не на сайте.
• Кеш. После ремонта очистите кеш плагина кеширования, CDN (если он есть) и браузера, иначе будете видеть старую, сломанную версию.

И на всякий случай: даже с работающей картой держите рядом адрес текстом и кнопку «Построить маршрут». Тогда клиент найдёт вас, даже если карта у него не загрузилась.

Как проверить, что карта действительно работает

• Откройте страницу контактов в режиме инкогнито и на телефоне через мобильный интернет, а не через офисный Wi-Fi.
• Во вкладке Console («Консоль») не должно остаться красных сообщений от Google.
• Нажмите на название компании в карточке на карте: должна открыться ваша компания в Google Картах.
• Если сайт открывается и с www, и без него, проверьте оба адреса.

Если вы всё проверили, а карта так и не появилась, или нет желания разбираться с консолью Google Cloud, напишите нам в WhatsApp — MPO Web Studio, небольшая веб-студия из Клуж-Напоки. Посмотрим удалённо и скажем, в чём именно дело; часто это удаётся исправить сразу.