Плагин Яндекс.Карт YaMaps для WordPress

Описание

YaMaps — простейший способ вставить карту на ваш сайт. У плагина дружественный интерфейс. Вы можете визуально ставить метки на Яндекс.Карту, двигать их мышью, менять иконки и многое другое.

Для использования новым редактором Гутенберг вам нужно сначала добавить блок Классического редактора!

Для корректной работы поиска по карте и составления маршрутов может понадобиться ввести API-ключ (JavaScript API и HTTP Геокодер) на странице настроек плагина.

Возможности плагина:

  • Вы можете добавлять карты без знания кода.
  • Вы можете редактировать шорткоды в визуальном редакторе.
  • Вы можете добавлять любое количество карт на страницу.
  • Вы можете добавлять множество меток на карту.
  • можно добавлять гиперссылки для меток.
  • Вы можете выбирать иконку и ее цвет в визуальном редакторе.
  • Вы можете выбирать тип отображаемой карты (Карта, Спутник, Гибрид), кнопки масштаба и другие элементы управления.

Структура шорткода

  • yamap center — координаты центра карты;
  • yamap height — высота карты;
  • yamap zoom — масштаб карты (от 0 до 19);
  • yamap scrollzoom — отключение масштаба карты колесом мыши (scrollzoom=’0′ для блокировки);
  • yamap mobiledrag — можно отключить перетаскивание карты на мобильных устройствах (mobiledrag="0" для отключения);
  • yamap type — тип карты (например: yandex#map, yandex#satellite, yandex#hybrid);
  • yamap controls — элементы управления картой, разделённые точкой с запятой (typeSelector;zoomControl;searchControl;routeEditor;trafficControl;fullscreenControl;geolocationControl);
  • yamap container — ID существующего блока в теме WP (карта будет помещена в блок с указанным ID, новый блок карты в содержимом записи создаваться не будет);

  • yaplacemark coord — координаты метки;

  • yaplacemark icon — значок метки (тип иконки Яндекс.карт или url-адрес вашего собственного изображения);
  • yaplacemark color — цвет маркера;
  • yaplacemark name — подсказка или содержимое значка;
  • yaplacemark url — URL-адрес или ID записи, которые будут открыты при нажатии на метку;

  • можно добавлять множество меток внутри шорткода карты.

Пример шорткода

[yamap center=’55.7532,37.6225′ height=’15rem’ zoom=’12’ type=’yandex#map’ controls=’typeSelector;zoomControl’][yaplacemark coord=’55.7532,37.6225′ icon=’islands#blueRailwayIcon’ color=’#ff751f’ name=’Название места’][/yamap]

Скриншоты

  • Окно визуального редактора шорткода.
  • Шорткод в визуальном редакторе TinyMCE.
  • Карта на странице блога.
  • Кнопка для вставки шорткода.
  • Визуальный выбор цвета метки.

Установка

  1. Загрузите папку yamaps в директорию плагинов /wp-content/plugins/.
  2. Активируйте плагин на вкладке ‘Плагины’ меню WordPress.

Часто задаваемые вопросы

Нужен ли мне API-ключ для использования плагина YaMaps?

В данный момент, ключ нужен только для поиска на карте. Остальной функционал плагина будет работать без ключа. Вы можете получить ключ (https://developer.tech.yandex.ru/services/) и ввести его на странице настроек плагина.

Как выбрать тип карты и её масштаб?

Просто установите тип карты и приближение в диалоговом окне визуального редактора. На сайте карта будет отображаться в том же виде.

Как использовать плагин с новым редактором Гутенберг?

Вы можете добавить блок с классическим редактором и вставить карту через него. Позднее может быть добавлена нативная поддержка, если большинство пользователей решат перейти на Гутенберг.

Как вставить карту в тему вордпресс посредством PHP-кода?

Используйте тэг echo do_shortcode() с вашим шорткодом в кавычках внутри.

Как установить иконку, которой нет вы выпадающем меню?

Вы можете выбрать иконку на https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/ и установить ее вручную в поле «Иконка». Например, «islands#blueRailwayIcon». Кроме того, вы можете установить URL-адрес собственной метки. Например, PNG-изображения с прозрачностью.

Почему нельзя изменить цвет иконки StretchyIcon?

Это ограничение API Яндекс Карт. Вы можете выбрать растягивающуюся иконку нужного цвета на странице https://tech.yandex.com/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/ и установить ее вручную.

Русскоязычное описание

https://www.yhunter.ru/portfolio/dev/yamaps/

GitHub проект

https://github.com/yhunter-ru/yamaps

Отзывы

19.06.2022
Снизу карты по середине выводится иконка - копирайт автора плагина. Нет опции для отключения. Убрать, конечно, можно, но о таких вещах лучше предупреждать в документации. Кроме того, это может нарушать соглашение об использовании api карт Яндекса, В итоге воспользовался конструктором карт на сайте Яндекса. А так плагин действительно удобный.
19.05.2022 1 ответ
Здравствуйте! У меня версия YaMaps Версия 0.6.23 И версия WordPress 5.9.3 Почему-то когда только открывается страничка (или обновляется), карты не сразу отображаются, карта появляется только через некоторое время (1-2 минут). Подскажите пожалуйста в чем может быть проблема, и как ее решить?
29.04.2022
Пожалуй, лучший плагин по интеграции Яндекс Карт из всех существующих сегодня. Также, хочу выразить отдельную благодарность автору данного плагина за оказанную помощь в процессе настройки.
Посмотреть все 37 отзывов

Участники и разработчики

«Плагин Яндекс.Карт YaMaps для WordPress» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

«Плагин Яндекс.Карт YaMaps для WordPress» переведён на 1 язык. Благодарим переводчиков за их работу.

Перевести «Плагин Яндекс.Карт YaMaps для WordPress» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

0.6.27

  • Исправлено: Карта за пределами основного цикла ВордПресс вызывала ошибку: Неверный API ключ.

0.6.26

  • Исправлены ошибки.

0.6.25

  • Поддержка WP 6.0

0.6.24

  • Исправлены ошибки.

0.6.23

  • Новое: Yandex Map Api вызывается только на страницах с картой