Коротко: Яндекс.Карту на сайт добавляют двумя способами: вставив готовый код из «Конструктора карт» (просто, через блок «HTML») или подключив JavaScript API (гибко: свои метки, кластеризация, балуны). Для одной метки на странице «Контакты» достаточно конструктора.
Способы вставки
| Способ | Плюсы | Минусы |
|---|---|---|
| Конструктор карт | без кода, быстро | ограниченное оформление |
| JS API | полный контроль, динамика | нужен код |
| Плагин карт | настройки в админке | лишний плагин |
| Статичная картинка | быстро и легко | нет интерактива |
Вкладки: пошагово
- Откройте конструктор карт Яндекса.
- Найдите адрес и поставьте метку.
- Настройте размер и масштаб карты.
- Скопируйте готовый код вставки.
- Вставьте его в блок «HTML» на странице WordPress.
Получится iframe или встроенный скрипт. Метку и центр карты можно задать координатами.
ymaps.ready(function () {
const map = new ymaps.Map('map', {
center: [55.75, 37.61],
zoom: 15,
});
map.geoObjects.add(new ymaps.Placemark(
[55.75, 37.61],
{ hintContent: 'Наш офис' },
{ preset: 'islands#blueDotIcon' }
));
});API даёт несколько меток, свои иконки, кластеры и всплывающие балуны. Требуется контейнер <div id="map"> с заданной высотой.
- Откройте страницу «Контакты» в редакторе.
- Добавьте блок «HTML».
- Вставьте код карты.
- Сохраните и проверьте на сайте.
- При правке темы проверьте, что блок не «сломался».
Если карта нужна на всех страницах (например, в подвале) — лучше шаблон в дочерней теме или виджет.
- карта грузит внешние скрипты — подключите её «лениво» (по клику или при прокрутке);
- сначала покажите статичную картинку, а загрузку карты — по клику;
- не ставьте несколько карт на одну страницу без нужды;
- задайте высоту контейнера, иначе карта «схлопнется» и сместит вёрстку;
- для мобильных делайте карту на всю ширину.
Практика: добавить карту на «Контакты»
- Уточните точные координаты офиса.
- Соберите карту в конструкторе с нужным масштабом.
- Вставьте код в блок «HTML» страницы.
- Задайте высоту контейнера и адаптивную ширину.
- Добавьте кнопку «Построить маршрут» (ссылка на карту).
- Проверьте на телефоне: карта не должна «ломать» вёрстку.
- Проверьте скорость загрузки страницы.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Карта не видна | нет высоты у контейнера | задать высоту |
| Карта вылезает за экран | фиксированная ширина | width: 100% |
| Страница тормозит | карта грузится сразу | ленивая загрузка |
| Метка не там | неверные координаты | уточнить широту и долготу |
Проверьте себя
Вопросы и ответы
Для конструктора — нет. Для JavaScript API ключ может потребоваться, в зависимости от лимитов и условий использования.
Через JS API: добавляйте несколько меток. В конструкторе для нескольких точек может понадобиться отдельный набор.
Да — статичное изображение карты со ссылкой на полную версию. Это самый быстрый вариант, но без интерактива.
Косвенно: важна информация об адресе и контактах текстом рядом с картой — её индексируют поисковики. Также помогает локальному продвижению.
Итоги
- Карту вставляют через конструктор, JS API или плагин.
- Контейнеру обязательны ширина и высота.
- Для скорости — ленивая загрузка или статичная картинка.
- Рядом с картой держите адрес и контакты текстом.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.