Как добавить Google Maps на сайт Turbosite
Google Maps — мировой стандарт картографии. Подходит для сайтов с международной аудиторией или туристического бизнеса. Самый простой способ — встроить карту через iframe прямо из интерфейса Google Maps, без API-ключа. Бесплатно. Установка занимает 5 минут.
Что понадобится
- Аккаунт Google (не обязателен для базового iframe) — регистрация
- Опубликованный сайт на Turbosite
- 5 минут
Шаг 1. Получить код карты
- Откройте google.com/maps.
- Найдите нужный адрес или организацию в поиске.
- На карточке места нажмите кнопку «Поделиться» (значок со стрелкой).
- В открывшемся окне выберите вкладку «Встраивание карт» (Embed a map).
- Выберите размер карты: маленькая, средняя, большая или произвольная.
- Скопируйте сгенерированный код iframe.
📷 Скриншот: окно «Встраивание карт» в Google Maps с iframe-кодом и вариантами размера.
Шаг 2. Вставить код в Turbosite
Карта появляется в определённом месте страницы (обычно в блоке «Контакты»), поэтому код вставляется в тело страницы.
- Откройте ваш сайт в Turbosite.
- Добавьте блок «HTML-код» в нужное место страницы.
- Вставьте скопированный iframe Google Maps.
- Сохраните изменения.
- Опубликуйте сайт.
📷 [скриншот Turbosite — будет добавлен: блок HTML-код в теле страницы с картой Google].
Шаг 3. Проверить, что карта работает
- Откройте опубликованный сайт.
- Прокрутите до блока с картой — она должна загрузиться через 1–2 секунды.
- Проверьте интерактивность: кликните по метке, попробуйте увеличить, прочитать карточку места.
- Откройте на мобильном — карта должна адаптироваться.
Частые вопросы
Карта обрезается на мобильных или не на всю ширину.
В iframe удалите фиксированные значения width="600" и height="450" и оберните iframe в <div> с CSS-классом для адаптивности:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="ваш_src"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0" allowfullscreen>
</iframe>
</div>
Нужен ли API-ключ? Для базового iframe из меню «Поделиться» — нет. API-ключ нужен только если вы используете Google Maps Embed API напрямую или JavaScript API для кастомизации (свои метки, маршруты, стили).
Можно ли добавить свою метку или маршрут? Через iframe — только то, что есть в Google Maps. Для своих меток создайте карту в Google My Maps, а потом получите iframe оттуда.
Тарифы Google Maps Platform. С 2025 года у Google Maps Platform изменилась тарификация: вместо общего бесплатного кредита — отдельные месячные лимиты на каждый продукт. Базовый iframe Embed работает бесплатно без ограничений. Если используете JavaScript API — проверяйте лимиты в Cloud Console.
Карта на русском, нужно на английском.
Google автоматически определяет язык по локали браузера. Чтобы зафиксировать язык, добавьте в URL iframe параметр &hl=en (или другой код языка).
Куда смотреть дальше
- Google Maps Platform Documentation — официальная документация
- Google My Maps — создание своих карт с метками
- Цены Google Maps Platform — актуальные тарифы
