Google Карты на сайте без ключа: когда достаточно готового кода

Google Карту с постоянным адресом, выбранным участком или готовым маршрутом по-прежнему можно встроить на сайт без API-ключа и облачного проекта. Актуальная справка Google Карт предписывает выбрать команду встраивания и скопировать готовый код; сохранённые места пользователя и результаты измерения расстояния таким способом не публикуются.
Для обычной страницы «Контакты» этого достаточно: посетитель увидит выбранное место и сможет перейти из блока в Google Карты. Отдельный ключ нужен, когда сайт сам формирует адрес, режим просмотра или маршрут через Maps Embed API. Согласно условиям использования этого интерфейса, ключ обязателен для запросов, но сама услуга предоставляется без платы и без краткосрочных и суточных ограничений по числу запросов.
Как выбрать подходящий способ
Способ зависит от содержания карты, а не от системы, на которой работает сайт. Для одной организации или заранее подготовленного маршрута достаточно готового кода из Google Карт. Собственная карта нужна для нескольких объектов, а программная интеграция — для данных, которые меняются от страницы к странице.
- Готовый встраиваемый блок подходит для постоянного адреса, отдельного места, участка города или заранее построенного маршрута.
- Пользовательская карта позволяет объединить филиалы, пункты выдачи, площадки мероприятия или остановки одного маршрута.
- Программная карта оправданна, если адрес, масштаб, режим просмотра или маршрут автоматически подставляются из базы сайта.
Расширение для WordPress или другой системы управления содержимым не образует отдельного типа карты. Оно либо вставляет готовый блок, либо обращается к одному или нескольким программным интерфейсам Google. Поэтому перед установкой расширения важно выяснить, какие именно службы оно использует и требуется ли для них платёжный аккаунт.
Как встроить адрес или готовый маршрут
- Откройте Google Карты на компьютере и найдите организацию либо точный адрес. Проверьте номер здания и положение метки: посетителю будет показан именно выбранный результат.
- Откройте окно публикации. Для места или участка карты выберите команду «Поделиться или встроить карту»; для маршрута используйте кнопку публикации в его панели.
- Перейдите к встраиванию и скопируйте предложенный код целиком. Короткая ссылка из соседней вкладки для вставки интерактивного блока не подходит.
- В редакторе сайта добавьте элемент, который принимает пользовательский код. В разных системах он может называться «Код», «Встраивание», «Пользовательский код» или «Произвольная разметка».
- Вставьте скопированный фрагмент, сохраните страницу и откройте её на компьютере и телефоне.
Если редактор выводит код обычным текстом или удаляет его после сохранения, проблема находится на стороне сайта. Следует выбрать элемент с поддержкой встраиваемого содержимого либо попросить администратора проверить правила фильтрации разметки.
Некоторые системы запрещают пользовательский код авторам с ограниченными правами. Отключать защиту всей страницы ради карты не следует: безопаснее предоставить доступ к подходящему блоку или поручить вставку администратору.
Как разместить карту на мобильной странице
Скопированный блок может иметь фиксированную ширину, из-за которой карта выходит за границы узкого экрана. Ширину следует ограничить размером родительского контейнера, а высоту подобрать так, чтобы органы управления не закрывали большую часть видимой области.
Не стоит помещать интерактивную карту в слишком узкую колонку или делать её единственным источником адреса. Адрес полезно продублировать обычным текстом и дополнить ссылкой для открытия маршрута. Тогда сведения останутся доступны, если внешнее содержимое не загрузится, будет заблокировано браузером или окажется неудобным для конкретного посетителя.
У встраиваемого элемента должно быть понятное название, например «Карта проезда к офису». Это помогает пользователям вспомогательных средств понять назначение блока, не исследуя его содержимое.
Когда нужна пользовательская карта
Обычной метки недостаточно, если на одной схеме требуется показать несколько связанных объектов. Для такой задачи подходит Google My Maps: владелец самостоятельно добавляет точки и линии, распределяет объекты по слоям и публикует собранную карту целиком.
У этого варианта есть важное ограничение: перед встраиванием карту необходимо сделать общедоступной, как указано в инструкции по публикации пользовательских карт. На ней нельзя размещать закрытые адреса, персональные сведения или данные, предназначенные только для сотрудников и приглашённых участников.
- Создайте карту, присвойте ей понятное название и добавьте необходимые объекты.
- Проверьте подписи, адреса и расположение каждой метки.
- Разрешите публичный просмотр карты.
- Скопируйте код встраивания из меню карты и добавьте его в подходящий блок страницы.
- Откройте опубликованную страницу в приватном окне браузера, не входя в аккаунт Google.
Последняя проверка показывает, действительно ли карта доступна обычному посетителю. Если вместо неё появляется запрос на вход или разрешение, настройки доступа ещё не подходят для публичного сайта.
Когда действительно нужен API-ключ
Ключ необходим разработчику, если встраиваемый блок собирается программно. Условный пример — каталог филиалов, где каждая страница берёт собственный адрес из базы и автоматически формирует карту. Для такой схемы потребуются облачный проект Google, включённый Maps Embed API и ключ в запросе.
Наличие ключа само по себе не означает, что показ карты оплачивается. Однако правило о бесплатном использовании этого конкретного интерфейса нельзя переносить на всю платформу Google Карт. Расширение или приложение может дополнительно обращаться к геокодированию, поиску мест, расчёту маршрутов или другим службам с отдельными тарифами и ограничениями.
Проверять нужно точное название каждого подключённого интерфейса и его условия, а не только слово «карты» в настройках расширения. Если страница показывает один неизменный адрес, программная интеграция добавляет лишние настройки и не даёт существенного преимущества перед готовым кодом.
Что проверить перед публикацией
- Метка находится у нужного здания, а текстовый адрес указан без ошибок.
- Адрес доступен не только внутри интерактивной карты.
- Блок помещается на мобильном экране без горизонтальной прокрутки.
- Карта не перекрывает текст, кнопки и другие элементы страницы.
- Пользовательская карта открывается без входа в аккаунт Google.
- API-ключ применяется только в сценарии, где содержимое формируется программно.
Разделение получается практичным: постоянный адрес или готовый маршрут размещают с помощью скопированного кода без API-ключа; набор собственных публичных объектов собирают в пользовательской карте; меняющиеся параметры передают через программный интерфейс. Для большинства страниц «Контакты» подходит первый вариант.
Читайте также:
Подпишитесь на рассылку
Получайте свежие новости Web3, AI и криптовалют прямо на вашу почту.