Как правильно встроить Google Maps на сайт, чтобы клиенты вас находили, а страница не тормозила

Чтобы вставить карту Google на сайт, найдите свою компанию в Google Картах на компьютере, нажмите Поделиться, откройте вкладку Встраивание карт, нажмите Копировать HTML и вставьте код в HTML-блок страницы. Это бесплатно и не требует API-ключа. Чтобы карта не тормозила сайт, загружайте её только тогда, когда посетитель до неё долистал, и поставьте рядом кнопку «Маршрут», которая сразу открывает навигацию в телефоне.

Ниже — пошаговая инструкция, разница между iframe и API Google (что бесплатно, а что нет в 2026 году), как сохранить скорость страницы, что делать с согласием на cookies и какие проблемы встречаются чаще всего.

Зачем делать это аккуратно: самый неприятный момент для нового клиента — не тот, когда он не нашёл цену, а тот, когда он сидит в машине перед зданием с несколькими входами и не понимает, какой из них ваш. Или когда открывает ваш сайт по мобильному интернету на парковке, а карта всё грузится и грузится. Правильно поставленная карта решает это за два касания. Плохо поставленная — сама создаёт проблему.

Пошагово: как вставить Google Карту на сайт

• Откройте Google Карты на компьютере и найдите название компании, а не только адрес. Тогда метка покажет именно вашу компанию, а не безымянную точку на улице.
• В карточке компании нажмите Поделиться и выберите вкладку Встраивание карт. Если нужна просто область карты без конкретной компании, откройте Меню → Ссылка/код.
• Выберите размер (маленький, средний, большой или свой) и нажмите Копировать HTML.
• Вставьте код на страницу контактов: в WordPress — в блок «Произвольный HTML», в Tilda, Wix и других конструкторах — в блок для HTML-кода.
• Опубликуйте страницу и проверьте на телефоне, что метка стоит у нужного входа.

Точно так же можно встроить маршрут: нажмите Как добраться, укажите точку отправления (например, ближайшую станцию метро или остановку), выберите маршрут и повторите те же шаги. Это полезно, если к вам чаще добираются на общественном транспорте.

Осторожно со встроенными блоками карт в темах и конструкторах: некоторые просят «Google Maps API Key». Ключ создаётся в проекте Google Cloud, к которому нужно привязать платёжный аккаунт с банковской картой, даже если вы пользуетесь только бесплатной частью. Например, стандартный блок карты Google в Tilda работает через Maps JavaScript API, который сверх бесплатного порога платный. Если нужно просто показать адрес, такой блок не нужен: вставьте обычный iframe из Google Карт в HTML-блок (в Tilda это блок T123).

Iframe, Embed API или JavaScript API: что выбрать

Когда говорят «поставить Google Maps на сайт», могут иметь в виду четыре разные вещи, и их постоянно путают. Разница — в стоимости, в API-ключе и в том, насколько легко всё сломать при обслуживании сайта.

Что изменилось с ценами: с марта 2025 года Google заменил ежемесячный кредит в 200 $ отдельным бесплатным порогом для каждой услуги. Для динамических карт на Maps JavaScript API это 10 000 загрузок в месяц; сверх порога оплата идёт за каждую 1 000 загрузок — по прайсу Google Maps Platform. Maps Embed API остаётся бесплатным и без лимита запросов, но требует API-ключ, а значит, и проект Google Cloud с платёжным аккаунтом.

Наше правило: если у вас один адрес, не трогайте JavaScript API. Iframe или ссылка делают ту же работу бесплатно, и сломать их гораздо сложнее. API имеет смысл, когда точек много и их нужно фильтровать или подтягивать из вашей базы данных.

Ещё частый вопрос: можно ли ставить карту Google на сайт компании? Да. В руководстве по использованию карт Google прямо пишет: если вам нужно просто встроить карту Google на сайт, их разрешение не требуется. Иначе дело обстоит, только если карты — часть продукта, который приносит доход, например приложения: тогда Google требует использовать Google Maps Platform.

Почему карта тормозит сайт

Карта Google — не картинка. Это маленькое приложение, которое при загрузке тянет с серверов Google скрипты, фрагменты карты, шрифты и иконки. Каждый файл — лишний запрос, который телефон делает по мобильному интернету, ровно там, где вас ищет человек с парковки.

Проверить, сколько добавляет карта, можно самому: откройте страницу контактов в Chrome, нажмите F12 (на Mac — Cmd + Option + I), перейдите на вкладку Network, обновите страницу и посмотрите внизу число запросов и объём переданных данных. Затем сравните со страницей без карты.

Проблема не в том, что на сайте есть карта. А в том, что чаще всего она загружается сразу, хотя стоит внизу страницы — или, ещё хуже, в подвале каждой страницы сайта. Вы платите скоростью везде за то, что посетитель, возможно, даже не увидит.

Как загрузить карту без потери скорости

Три способа, от самого простого к самому эффективному:

• loading="lazy" у iframe — один атрибут, который говорит браузеру отложить карту, пока посетитель не долистает до неё. Его понимают все основные браузеры: Chrome, Edge, Firefox и Safari. Проверьте, есть ли он в вашем коде; если нет — добавьте.
• Загрузка по клику (наша рекомендация) — вместо карты показываете лёгкое изображение и кнопку «Показать карту». Настоящий iframe загружается, только когда человек нажмёт. В документации Lighthouse Google называет такой приём «фасадом» и советует его для тяжёлых сторонних встраиваний вроде видеоплееров.
• Только ссылка + кнопка «Маршрут» — иногда встроенная карта вообще не нужна. Кнопка, которая открывает Google Карты в телефоне клиента с уже проложенным маршрутом, почти ничего не весит.

Для заглушки при загрузке по клику лучше всего подходит фотография входа: она сразу решает и проблему здания с несколькими дверями. Если нужна именно картинка карты, её может сгенерировать Maps Static API, но для него нужен API-ключ и платёжный аккаунт (бесплатный порог там тоже 10 000 запросов в месяц).

И ещё: ставьте карту только на страницу контактов, а не в подвал всех страниц. На остальных страницах достаточно ссылки «Как нас найти».

Карта и согласие на cookies (GDPR)

Когда iframe загружается, браузер посетителя подключается к серверам Google: туда уходит его IP-адрес, а Google может установить cookies. Поэтому многие сайты в ЕС загружают карту только после согласия посетителя — через баннер cookies или по клику на заглушку.

Хорошая новость: загрузка по клику решает сразу две задачи — скорость и согласие. Добавьте на заглушку короткую фразу вроде «Карту предоставляет Google; после нажатия она загрузится с серверов Google» и упомяните Google Карты в политике конфиденциальности. Точные формулировки согласуйте с тем, кто готовит ваши документы по защите данных.

Кнопка «Маршрут» — деталь, о которой все забывают

Карта показывает, где вы находитесь. Кнопка маршрута ведёт человека к вам. Это разные вещи, и клиентов приводит вторая.

Ссылка простая и не требует API-ключа: https://www.google.com/maps/dir/?api=1&destination= и дальше ваш адрес, где пробелы заменены на «+». Например: https://www.google.com/maps/dir/?api=1&destination=Strada+Exemplu+10+Cluj-Napoca. Параметр api=1 обязателен в любой такой ссылке.

Как она работает, по документации Google Maps URLs:

• На Android и iPhone открывает приложение Google Карты, если оно установлено; если нет — Google Карты в браузере. На компьютере открывается в браузере.
• Если точку отправления не указывать, Google возьмёт самое подходящее место — обычно текущее местоположение телефона.
• Для точности можно добавить destination_place_id (идентификатор места вашей компании), но Google требует, чтобы в ссылке оставался и параметр destination.

Если ваши клиенты чаще пользуются Waze, добавьте вторую кнопку со ссылкой https://waze.com/ul?ll=LAT,LON&navigate=yes, где LAT и LON — координаты входа. На телефоне она откроет приложение Waze, на компьютере — веб-версию. Если клиенты привыкли к другому навигатору, например к Яндекс Картам или 2ГИС, можно сделать кнопку и для него.

Ставьте кнопки рядом с адресом и телефоном, вверху страницы контактов, а не под картой. Без них вы просите человека скопировать адрес, вставить его и искать самому — на этих шагах многие сдаются.

Карта на телефоне: размер и прокрутка

• Ширина 100% вместо фиксированной ширины из скопированного кода, чтобы карта не вылезала за экран телефона.
• Фиксированная высота, удобная для телефона — Google не поддерживает встроенные карты меньше 200 px по любой из сторон.
• Свободные поля вокруг карты на мобильных, чтобы человек мог листать страницу пальцем и не «застревал» в карте.
• Адрес ещё и текстом рядом с картой, а телефон — кликабельной ссылкой. Текст читается мгновенно, его можно скопировать, и его понимают и Google, и программы чтения с экрана.

Частые проблемы и что делать

• Метка стоит на соседней улице — обычно дело в профиле компании или в адресе, который вы искали, а не в коде. Смотрите, как исправить метку в Google Картах.
• Карта затемнена с надписью «For development purposes only» или показывает сообщение, что страница не может правильно загрузить Google Карты — обычно это карта на JavaScript API: нет ключа, неверные ограничения ключа, API не включён в проекте или не подключена оплата. Пошагово — в статье карта Google не загружается на сайте.
• Карта пропала после установки баннера cookies — баннер блокирует её до согласия. Это нормально, но на её месте должна быть заглушка с кнопкой, а не пустое место.
• Код исчезает после сохранения в WordPress — обычно у роли вашей учётной записи (например, «Автор» или «Участник») нет права вставлять HTML-код. Сохраните страницу под администратором или попросите его.
• Карта вылезает за экран телефона — у iframe фиксированная ширина в пикселях; поменяйте её на 100%.

Детали, которые решают

• Правильный адрес, одинаковый везде — на сайте, в профиле компании и на карте. Если в профиле данные не в порядке, начните с него; об этом мы пишем в статье что такое Google Business Profile.
• Описательный title у iframe — атрибут title, например «Карта: [название компании]», помогает программам чтения с экрана. Мелочь, но правильная.
• Проверка на реальном телефоне — откройте страницу по мобильному интернету, а не только по офисному Wi-Fi. Именно там видно, тянет ли карта страницу вниз.
• Одна карта — внизу страницы контактов, рядом с часами работы и телефоном. Всё остальное — ссылкой.

Карта полезнее всего как часть стратегии локальной видимости, а не сама по себе. Если хотите появляться, когда кто-то ищет «рядом со мной», прочитайте также про локальное SEO.

Сколько стоит доверить это нам

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

Мы небольшая команда из Клуж-Напоки и работаем удалённо с клиентами по всей Румынии. Мы не продадим вам «локатор магазинов», который вам не нужен, — поставим ровно то, что помогает именно вам.

Хотите увидеть, как это будет выглядеть у вас, ничего не платя? Напишите нам в WhatsApp на wa.me/40750257140, и мы сделаем бесплатное демо сайта — с картой и кнопкой маршрута, уже настроенными как надо.