Как вставить Яндекс карту на сайт WordPress

yandex_karty
В этой статье мы научимся создавать Яндекс карту и вставлять ее на наш сайт WordPress. Данная тема востребована, так как почти на всех корпоративных сайтах в разделе контактов размещается карта с геолокацией организации.
Для создания карты воспользуемся конструктором от Яндекс —  https://tech.yandex.ru/maps/tools/constructor/
Чтобы пользоваться этим сервисом необходимо иметь почту на Яндексе. Если она у Вас есть, нужно авторизоваться. Если нет, необходимо зарегистрировать почту. После авторизации сервис предложит создать новую карту.
sozdat_karty
Нажимаем создать карту.  Откроется конструктор карт Яндекса, справа необходимо ввести название объекта, например, АВТОСИЛА , добавить описание. Слева Вы увидите карту вашего города.
nazvanie_karty
Вводим адрес, который хотим отобразить на карте. Если Яндекс не находит нужный дом или строение, можно воспользоваться кнопкой метки и установить значок на карте вручную. Подпишите название объекта в поле «подпись метки». Можно изменить цвет метки, ее тип и вид. После нажимаем «готово».
nazvanie_metki_na_karte
Кнопка «Слои» дает три варианта отображения карты: схема, спутник и гибрид. Если нажать на кнопку пробки, то на карте будет отображаться в реальном времени обстановка на дороге. Это удобно для густонаселенных городов.
gibrid_karta
Потом нажимаем «Сохранить и продолжить».
Как вставить Яндекс карту на сайт WordPress
Теперь вносим нужные размеры карты: ширины и высоту. Если поставить галочку «растянуть по ширине», то размер карты будет по высоте фиксированный, а по ширине адаптивный и будет занимать 100% ширины экрана.
Нажимаем кнопку получить код карты и копируем полученный скрипт.
Создаем страницу контактов и в режиме Текст или в блоке кодов вставляем скрипт, затем сохраняем.
blok_koda
Переходим на эту страницу и видим, что в нужном месте появилась Яндекс карта.
Coder/ автор статьи
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

три × 3 =

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: