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

Вы открываете страницу контактов, а вместо карты — серый прямоугольник, карта под надписью «For development purposes only» или просто пустота. Для клиента, который ищет, как к вам добраться, это как если бы вы переехали, никого не предупредив. Хорошая новость: почти всегда это мелкая проблема настройки, а не что-то сломанное навсегда.

В этой статье я простым языком разберу реальные причины (не все они связаны с «дорогим ключом API») и покажу, как чинить каждую, шаг за шагом. Самое важное, что стоит запомнить: для простой карты с адресом вашей фирмы в большинстве случаев ключ API вообще не нужен. Есть бесплатный вариант, который не ломается.

Сначала выясните, КАКАЯ у вас карта

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

• Простая карта через iframe (Embed) — код выглядит как `<iframe src="https://www.google.com/maps/embed?...">`. Это бесплатный вариант, ключ API не нужен, и именно его я рекомендую большинству фирм.
• Карта через JavaScript (Maps JavaScript API) — в коде есть `maps.googleapis.com/maps/api/js?key=...`. Ей нужен ключ API, активный платёжный аккаунт в Google, и обычно именно она — источник сообщений об ошибке.

Чтобы узнать, что у вас, откройте страницу контактов, кликните правой кнопкой по области карты и выберите «Просмотреть код». Ищите слова `embed` или `api/js`. Если в консоли (вкладка «Console») есть ошибки красным — запишите их, они точно скажут, в чём дело.

Типичные сообщения об ошибках и что каждое означает

Если вы используете вариант с ключом API, карта сама говорит, что её беспокоит. Самые частые:

• «For development purposes only» (карта под водяным знаком) — на проекте Google Cloud не включена оплата, или к ключу не привязан платёжный аккаунт.
• BillingNotEnabledMapError — то же самое: нужно включить биллинг, даже если вы остаётесь в пределах бесплатного месячного лимита.
• RefererNotAllowedMapError — ключ ограничен другим доменом. Вы сменили домен, перешли с HTTP на HTTPS или запустили новый сайт, а текущий адрес не в списке разрешённых.
• ApiNotActivatedMapError — вы не активировали сервис «Maps JavaScript API» в консоли Google Cloud.
• InvalidKeyMapError — ключ неверный, удалён или скопирован с ошибкой.

Сообщение вы увидите либо на карте, либо в консоли браузера. Это и есть ваша карта к решению — в буквальном смысле.

Простое решение: перейдите на бесплатный embed без ключа

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

1. Зайдите на Google Maps, найдите точный адрес фирмы (лучше всего — ваш профиль Google Business).

2. Нажмите Поделиться (Share) → вкладка Встроить карту (Embed a map).

3. Выберите размер и скопируйте весь код `<iframe ...>`.

4. Вставьте его на страницу контактов вместо старой карты.

Готово. Этот код не зависит от биллинга, не истекает и не выдаёт сообщений об ошибке. Именно его я рекомендую большинству местных фирм, потому что это «поставил и забыл»: вставили один раз и больше не думаете. Ключ API остаётся нужен только для сложных интерактивных карт (много меток, стили, расчёт маршрута прямо на сайте).

Если хотите оставить ключ API — правильный ремонт

Иногда сайт уже построен на Maps JavaScript API и переписывать его не хочется. Тогда проверьте по порядку:

• Активный биллинг: в Google Cloud Console у проекта должен быть привязан платёжный аккаунт. Google даёт щедрый бесплатный месячный лимит для малого бизнеса, но карта в аккаунте должна быть.
• Сервис включён: активируйте «Maps JavaScript API» (и «Maps Embed API», если используете embed с ключом).
• Ограничения ключа: в «Application restrictions» → «HTTP referrers» правильно добавьте свой домен — и с `www`, и без, и на HTTPS. Классическая ошибка — добавить только `primer.ru` и забыть `www.primer.ru`.
• Смешанный контент: если сайт на HTTPS, а карта вызывается по HTTP, браузер её блокирует. Всё должно быть на `https://`.

После любого изменения ключа подождите несколько минут — Google применяет изменения не мгновенно.

Менее очевидные причины: баннер cookie и блокировщики

Иногда карта настроена правильно, но всё равно не появляется. Проверьте и это:

• Баннер согласия (cookie) — многие GDPR-решения блокируют Google Maps, пока посетитель не примет маркетинговые cookie. Юридически это верно, но многие отказываются и остаются без карты. Решение — либо заглушка с кнопкой «Показать карту», либо возврат к простому embed как к базовому элементу.
• Расширения-блокировщики (ad blocker) — некоторые блокируют скрипты Google. Проверьте карту в режиме инкогнито без расширений, чтобы исключить это.
• Кеш — после починки очистите кеш сайта и браузера, иначе будете видеть старую сломанную версию.

Если вы всё перепробовали, но не работает, или не хотите возиться с консолью Google Cloud, напишите нам в WhatsApp в MPO Web Studio. Мы посмотрим удалённо, точно скажем, в чём дело, и часто чиним на месте — работаем удалённо по всей стране и сначала показываем демо, бесплатно.