Краткое описание
В связи с переходом “Google Maps” на платную основу и участившимися проблемами со старыми API-ключами – в качестве альтернативы добавлена поддержка “Yandex Maps” и соответствующий шорткод [ trx_sc_yandexmap ].
Яндекс-карты в бесплатной версии ограничивают количество запросов в сутки – не более 25 000. API-ключ требуется только для платной версии.
Практически все параметры аналогичны шорткоду “Google map”, за исключением анимации иконок и кастомных стилей карты. API Яндекс-карт не предлагает нормального способа кастомной стилизации карт, как у Гугла. Пока использую метод css-стилизации слоев карты. Для демонстрации добавлено три стиля:
- “Default” – без дополнительной стилизации,
- “Greyscale” – серое тонирование
- “Inverse” – инверсия дефолтного стиля
Примеры создания css-стилей можно увидеть в yandexmap.js (в конце файла) и, при необходимости, добавлять свои:
1) Используя экшн “action.add_yandexmap_styles” добавляем нужные правила для нового стиля в глобальный js-объект TRX_ADDONS_STORAGE[‘yandexmap_styles’]
2) Обрабатывая PHP-фильтр “trx_addons_filter_sc_yandexmap_styles” добавляем название нового стиля в список доступных стилей
Если на карте нужен всего один маркер и его вид не меняется (используется дефолтный значок Яндекс) – можно указать его параметры прямо в поле “Address”. Если же нужно указать несколько маркеров и/или сменить значок и/или задать текст всплывающей подсказки – в этом случае маркеры нужно добавлять с помощью списка “Markers”.
При расстановке маркеров можно задавать их положение в виде обычной строки адреса или пары координат Latitude, Longitude (Lat, Lng). Также в параметрах этого шорткода можно выбрать картинку с изображением маркера. Внимание! “Нулевой” точкой картинки считается середина её нижней стороны.
При описании маркеров можно указать “Title” – всплывающую подсказку, которая появляется при наведении мыши на маркер.
А в поле “Description” можно задать подробное описание маркера, которое появляется во всплывающем блоке при щелчке на этом маркере. Описание может содержать html-разметку для вставки картинок и/или форматирования текста.
Map with default settings
В этом шорткоде задан один адрес и больше никакие настройки не менялись
Map with several custom markers
В этом примере создано три маркера с кастомными картинками, всплывающими подсказками и описанием по клику на маркеры. Масштаб вывода автоматически подбирается так, чтобы все маркеры одновременно поместились в окне. Если уменьшить масштаб отображения карты, то близлежащие маркеры заменяются “кластером” – маркером с цифрой по количеству “спрятанных” в нем маркеров. Щелчок на кластере автоматически масштабирует карту так, чтобы все “спрятанные” в нем маркеры поместились в область просмотра.Layout ‘Default’ with inner content
Здесь применен стиль карты “Greyscale”, а также задан внутренний контент для шорткода “Yandexmap”, который выводится поверх карты (тип вывода “Default”).
Также центр карты смещен вправо, чтобы не перекрывать маркер и расположенные рядом объекты
Layout ‘Detailed’ with inner content
Здесь применен стиль карты “Inverse”, а также задан внутренний контент для шорткода “Yandexmap”, который выводится под картой (тип вывода “Detailed”)