Шаг 1. Найдите место на Google Картах
Откройте Google Карты на компьютере и найдите свою компанию по названию. Если у компании есть Профиль в Google, встраивайте именно его: тогда на карте будут название, рейтинг и кнопка маршрута, а не просто точка по адресу. Если профиль ещё не подтверждён, пригодится статья о подтверждении Профиля компании.
Шаг 2. Скопируйте код
- В карточке места нажмите «Поделиться». Если нужен просто фрагмент карты без карточки, откройте меню слева вверху и выберите «Ссылка/код».
- Перейдите на вкладку «Встраивание карт».
- При желании выберите размер и подвиньте карту, чтобы место оказалось по центру.
- Нажмите «Копировать HTML».
Вы получите код вида <iframe src="https://www.google.com/maps/embed?pb=…"></iframe>.
Шаг 3. Вставьте код на сайт
Вставьте код в нужное место страницы. В большинстве визуальных редакторов для этого есть режим HTML или отдельный блок для кода. Учтите, что некоторые редакторы и фильтры CMS из соображений безопасности вырезают iframe. Если после сохранения карты нет, проверьте настройки фильтра текста для своей группы пользователей.
Шаг 4. Сделайте карту адаптивной
В коде из Google Карт стоит фиксированная ширина, например width="600". На телефоне такая карта вылезает за экран. Проще всего заменить ширину на 100%:
<iframe src="https://www.google.com/maps/embed?pb=…"
width="100%" height="400" style="border:0;"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="Наш офис на карте"></iframe>
Атрибут loading="lazy" откладывает загрузку карты, пока посетитель не прокрутит до неё, и ускоряет страницу. Атрибут title нужен экранным дикторам, чтобы назвать карту.
Как встроить маршрут
Постройте маршрут в Google Картах через «Как добраться», выберите вариант, нажмите «Поделиться» → «Встраивание карт» → «Копировать HTML». Так удобно показать, например, как пройти к офису от вокзала или парковки.
Когда без API-ключа не обойтись
Карта из «Поделиться» подходит для одной точки или маршрута. Ключ Google Maps Platform нужен, если вы хотите:
- показать на одной карте несколько филиалов или объектов со своими метками;
- подсказывать адрес при вводе в форме заказа или доставки;
- рассчитывать расстояние или стоимость доставки;
- оформить карту в фирменных цветах.
Для встраивания карт через API у Google есть Maps Embed API: по данным Google, все его запросы бесплатны и без ограничения количества. Остальные API платные сверх бесплатного объёма, поэтому ключ ограничивают по домену и следят за расходами.
Конфиденциальность. Встроенная карта загружается с серверов Google и может устанавливать cookie. На сайтах для посетителей из ЕС это учитывают в cookie-баннере и политике конфиденциальности — например, показывают карту после согласия или по клику.
Частые ошибки
- Встроена точка по адресу, а не Профиль компании — клиент не видит название и отзывы.
- Фиксированная ширина ломает вёрстку на телефоне.
- Карта стоит на каждой странице сайта — это лишняя загрузка, достаточно страницы «Контакты».
- Вместо карты вставлен скриншот — по нему нельзя проложить маршрут.
Коротко
- Найдите компанию на Google Картах, лучше — её Профиль.
- «Поделиться» → «Встраивание карт» → «Копировать HTML».
- Вставьте код в HTML-режиме редактора.
- Замените ширину на 100% и оставьте
loading="lazy".
- Для нескольких точек, подсказки адреса и расчёта доставки нужен ключ API.
Если нужна карта с несколькими точками, подсказка адреса в формах или маршрут до клиента, мы можем подключить Google Maps к сайту через API: оформим доступ, защитим ключ и ограничим расходы.
