Google-карта не отображается на сайте — что делать

Если карта Google Maps не показывается на странице — пустой блок, серый прямоугольник или ошибка вместо карты — в 90% случаев дело в неправильно вставленном iframe-коде, проблемах с API-ключом или блокировке скрипта на уровне браузера. Проверка занимает пару минут: открываете консоль разработчика (F12), вкладку Console, и смотрите, есть ли красные ошибки, связанные с maps.googleapis.com.

Какие ошибки чаще всего встречаются

  • «For development purposes only» — водяной знак на карте. Значит, не подключён биллинг в Google Cloud Console или ключ API не привязан к платёжному аккаунту.
  • «This page can’t load Google Maps correctly». Обычно указывает на превышение лимита запросов, неверный ключ или ограничение по доменам в настройках API.
  • Пустой белый/серый блок без текста ошибки. Часто причина — блокировщик рекламы (AdBlock, uBlock) или ограничения Content Security Policy на самом сайте.
  • Карта не грузится только в мобильной версии. Проверьте, не обрезает ли CSS высоту контейнера в 0px — карта Google требует явно заданную высоту у родительского блока.

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

Скопируйте адрес карты из атрибута src iframe и откройте его в новой вкладке напрямую. Если карта открывается — проблема на стороне вёрстки или скриптов сайта, а не в самом сервисе Google Maps. Если и там ошибка — дело в ключе API или настройках проекта в Google Cloud.

Как вставить карту заново без ошибок

Проще всего использовать стандартный способ: зайти на maps.google.com, найти нужный адрес, нажать «Поделиться» → «Встроить карту» и скопировать готовый iframe-код целиком, не редактируя его вручную. Такой код не требует своего API-ключа и работает без биллинга — в отличие от JavaScript API, который используется, если нужна интерактивная карта с метками, кластерами или кастомным дизайном.

Что делать, если сайт использует Maps JavaScript API

  • Проверьте в Google Cloud Console, что ключ активен и не превышена дневная квота.
  • Убедитесь, что в ограничениях ключа указан правильный домен сайта — из-за опечатки в домене (например, без www или с http вместо https) карта может блокироваться.
  • Посмотрите, включён ли биллинг — без привязанной карты API отдаёт водяной знак или вообще не рендерит карту.

Если карта отображалась и вдруг пропала без изменений в коде сайта — сначала проверьте статус биллинга и квоты в аккаунте Google Cloud, а не саму вёрстку: чаще всего дело именно в этом.

Понравилась статья? Поделиться с друзьями: