Как добавить карту OpenStreetMap (Leaflet) на сайт Turbosite
OpenStreetMap (OSM) — бесплатная картографическая база данных, открытая альтернатива Google Maps и Яндекс Картам. Leaflet — самая популярная JavaScript-библиотека для отображения OSM на сайте. Полностью бесплатно, без API-ключей, без лимитов. Идеально для проектов, где важно избегать платных сервисов. Установка занимает 5–10 минут.
Что понадобится
- Координаты места, которое вы хотите показать (широта/долгота) — можно узнать на openstreetmap.org (правый клик на точке → «Show address»)
- Опубликованный сайт на Turbosite
- 5–10 минут
Шаг 1. Получить координаты вашего места
- Откройте openstreetmap.org.
- Найдите в поиске нужный адрес или организацию.
- Правый клик на нужной точке → «Show address».
- В адресной строке появятся координаты вида
52.5200,13.4050(широта, долгота). Запишите их.
Шаг 2. Подготовить HTML-код
В отличие от Google Maps и 2ГИС, готового iframe-конструктора у OSM нет — карта подключается через библиотеку Leaflet. Вот готовый код, который можно использовать:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
var map = L.map('map').setView([52.5200, 13.4050], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([52.5200, 13.4050]).addTo(map)
.bindPopup('Здесь мы находимся')
.openPopup();
</script>
Что заменить под себя:
-
52.5200, 13.4050— оба раза замените на ваши координаты (широта, долгота). -
15— масштаб карты (13–17 для города; чем больше, тем ближе). -
Здесь мы находимся— текст в popup-окне над меткой. -
height: 400px— высота карты.
Шаг 3. Вставить код в Turbosite
Карта появляется в определённом месте страницы.
- Откройте ваш сайт в Turbosite.
- Добавьте блок «HTML-код» в нужное место страницы (обычно — блок «Контакты»).
- Вставьте подготовленный код Leaflet.
- Сохраните изменения.
- Опубликуйте сайт.
📷 [скриншот Turbosite — будет добавлен: блок HTML-код в теле страницы с кодом Leaflet].
Шаг 4. Проверить, что карта работает
- Откройте опубликованный сайт.
- Прокрутите до блока с картой — должна загрузиться карта OpenStreetMap с меткой.
- Кликните по метке — появится popup с вашим текстом.
- Проверьте масштабирование (колесо мыши или щипок на мобильном).
Частые вопросы
Зачем использовать OSM вместо Google Maps? Главные причины: полностью бесплатно без лимитов и API-ключей, не требует регистрации, нет рисков отключения. Минус — данные могут быть менее актуальными в небольших регионах.
Можно ли добавить несколько меток?
Да, повторите L.marker([широта, долгота]).addTo(map).bindPopup('Текст'); для каждой метки.
Карта тормозит сайт. Leaflet и плитки OSM загружаются по требованию. Если на странице одна карта — проблем не будет.
Можно ли стилизовать карту в фирменных цветах? Да, но не через стандартные плитки OSM. Используйте сторонние tile-провайдеры (Mapbox, Stadia Maps, Thunderforest) — некоторые бесплатны для малых нагрузок, некоторые — платные.
Нужно ли указывать атрибуцию OpenStreetMap?
Да, обязательно — это требование лицензии. В готовом коде выше она уже есть в строке attribution.
Куда смотреть дальше
- Leaflet документация — полный справочник
- Leaflet Quick Start Guide — быстрое введение
- OpenStreetMap — сама карта
- Альтернативные tile-провайдеры — для смены стиля карты
