Конструктор яндекс карт для joomla

Обновлено: 27.04.2024

Нужно отобразить на карте флажки представительств (больше 50).

Полеза в документацию, разобралась, насколько хватило разумения. Из готовых примеров слепила :)

Ростов-на-Дону
';
rostov.description = '
Александра Приданникова';

// Добавляет метку на карту
map.addOverlay(rostov);

YMaps.Events.observe(rostov, rostov.Events.MouseEnter, function(rostov));

// Москва---------
var moscow = new YMaps.Placemark(gorod['Москва'],);

// Устанавливает содержимое балуна
moscow.name = 'Москва';
moscow.description = '

Екатерина Скачедуб';

YMaps.Events.observe(moscow, moscow.Events.MouseEnter, function(moscow));

// питер ---------
var piter = new YMaps.Placemark(gorod['Санкт-Петербург'],);

piter.name = 'Санкт-Петербург';
piter.description = '

Ирина Прокофьева ';

YMaps.Events.observe(piter, piter.Events.MouseEnter, function(piter));

// И дальше по такой же схеме. Остальные города опустила.

//-------------------- Вывод списка городов под картой - из примера Яндекса

// Подчеркиваем все ссылки
menuContainer.find('a').css('text-decoration', 'underline');

// Кроме той, на которую щелкнули
YMaps.jQuery(this).css('text-decoration', 'none');

// Перемещаем карту
map.panTo(geoPoint, );
return false;
>)
.end()

// Записываем элемент списка в список
.appendTo(menuContainer);
>)(item, gorod[item])
>
>);

Первая проблема - не получилось загрузить скрипт в тег , потому что в CMS можно вставить только в . Поэтому все вставила в .

Когда список был из 5-10 городов получалось. А сейчас отображаются не все метки. Возможно потому, что карта не успевает загрузиться.

Второе - под картой не выводится список городов.

Вобщем, и в javascirpt'e я совсем не шарю, чтобы все осмыслить и осознанно написать. Но уже сколько раз просматривала - все должно работать.

Ссылку на готовую страницу не могу дать, т.к. не хочу публиковать на сайте.

В этом статья я расскажу как установить модуль Яндекс карт на свой Joomla сайт. Модуль позволит вам добавить карту в материал или прикрепить ее к какой-нибудь позиции шаблона. Задать ширину, высоту и тип карты. Добавить метки по указанными адресам, а также определить их внешний вид.

2. Откройте в панели администратора раздел «Расширения->Менеджер расширений» («Extensions->Extensions manager») и установите модуль на вкладке «Загрузить из пакета».

3. В разделе «Расширения->Менеджер модулей» («Extensions->Module manager»), найдите модуль яндекс карт (он называется «Yandex map«) и откройте его.

4. Найдите вкладку «Добавить метки» («Add markers»). Здесь вы можете задать координаты вашего объекта, для этого достаточно ввести адрес в произвольной форме и они определятся автоматически. При необходимости, вы можете оставить поле адреса пустым и ввести координаты вручную. Далее можно задать свой цвет метки (в HEX кодировке) и заполнить поле дополнительной информации. Оно будет показано посетителям сайта при клике на иконку объекта.

5. В основной вкладке «Модуль» («Module») вы можете задать масштаб, тип карты и метки. Также определить способ выравнивания карты на странице и ее размеры (если в поле ширина стоит «auto» яндекс карта будет растянута на всю ширина материала/блока в котором она располагается).

6. Если вы хотите отображать карту в определенной позиции шаблона, то вам необходимо указать ее в настройках. Далее во вкладке «Привязка к пунктам меню» («Assigments») указать страницы, на которых она будет отображаться и опубликовать модуль.

7. Если вы хотите выводить модуль yandex maps непосредственно в материале, например на странице контактов, то откройте в менеджере материалов выбранную страницу в редакторе. И вставьте название модуля в фигурных скобках в нужном месте:

На этом все, ниже представлена подробная видео-инструкция по установке и настройке модуля Yandex map.

Каждый владелец сайта сегодня может вставить на свой ресурс карту Яндекса с помощью программного интерфейса API Яндекс.Карты. Но иногда этого оказывается недостаточно, чтобы быстро и легко реализовать интересные задумки (без переработки кода) вебмастера прибегают к специальным модулям и расширениям. Рассмотрим особенности каждого из способов.

Конструктор карт Яндекса

Главные особенности

Возможности

Создаваемой карте можно дать название (сервис позволяет создать несколько карт) и описание. Объекты наносятся с помощью мыши, после нажатия на соответствующую кнопку: метки, линии, многоугольники. Линиям и многоугольникам может быть присвоено описание, задан цвет и толщина линий. А меткам - название, описание, а также может быть задан цвет метки, добавлена иконка внутрь метки. Карта может иметь привычный схематичный вид, либо отображать картинку со спутника. Возможен и третий вариант - гибрид (на спутниковое изображение нанесены названия улиц, дорог, номера домов).

При сохранении можно выбрать тип карты:

интерактивный, с которым можно взаимодействовать (например, перетаскивать объекты),
статичный или печатный для сохранения в виде рисунка.

Созданные объекты можно сохранить в файл спецформата для импорта в программы-навигаторы, для просмотра в других программах, таких, как, например, Google Earth.

Для вставки карты на сайт используется сгенерированный сервисом код (вставляется в любую из позиций с помощью модуля "HTML-код").

Описание модулей для joomla

В последнее время популярность набирают разработки сторонних авторов. Рассмотрим функционал наиболее распространенных из них: конструктора кода, двух компонентов и модулей. Эти modules и components позволяют не только показать пользователю местонахождение компании, а поисковику определить региональную принадлежность, но и проложить маршрут, можно отобразить местонахождение пользователей и контактную информацию о них и даже развернуть целую баталию прямо на карте (за счет неё можно организовать взаимодействие участников рынка недвижимости, а точнее обеспечить отношения «Арендодатель-арендатор»).

Конструктор Яндекс карт XDSOFT

Главные особенности

совместим с joomla 2.5-3.x;
распространяется бесплатно;
адаптивен (ширина может быть задана параметром auto)

Возможности и настройка

После установки с официального сайта разработчика xdan.ru (страница загрузки: https://xdan.ru/joomla/modul-konstruktor-yandeks-kart-dlya-joomla/skachat-modul-konstruktor-yanleks-kart-dlya-joomla/joomla-1-2-0-8), переходим в менеджер модулей и находим неопубликованный под названием "Конструктор Яндекс Карт от XDSoft".

Основные действия по настройке совершаем в первой же вкладке: задаем позицию для модуля, вводим адрес в поле под картой, задаем размеры, потянув за нижний правый край, масштаб с помощью привычного бегунка слева, ставим метку, рисуем объекты. Нет необходимости нажимать кнопку сохранить после каждого добавленного объекта, модуль автоматически сохраняет все изменения с помощью AJAX.

Проверяем настройки в других вкладках и сохраняем модуль.

Модуль от joomly

Главные особенности

Настройка модуля производится быстро, благодаря тому, что модуль создан на русском языке, имеется русскоязычная инструкция (в том числе видео), на официальном сайте работает поддержка.

Кроме этого, модуль Яндекс карта для joomla:

работает на joomla 2.5-3.x;
базовый вариант распространяется бесплатно, есть и полная версия за 190 р. (разово, без абонентской платы);
является адаптивным («резиновая» верстка).

Возможности

менять размер (установить ширину и высоту);
выбрать из нескольких типов карт наиболее понравившийся (спутник, гибрид, обычный вид карты);
выбрать иконку из предложенных типов (иконка, точка, круг);
в платной версии можно добавить информационные окна и метки на карту, определив их вид (задав кодировкой цвет).

Главные особенности:

реализуется в 3-х платных версиях с автообновлением – Lite (раньше распространялась бесплатно, теперь имеет чуть больше настроек и стоит 1 000 р., её можно использовать на одном сайте), Medium (также на одном сайте, но с техподдержкой, с дополнительным плагином определения местонахождения пользователей, стоимость – 2 000 р.), PRO (без ограничений по доменам, плюс поддержка К2, ZOO, плагин «Арендодатель-Арендатор», стоимость – 4 000 р.);
адаптивный (карта выводится на весь экран);
подходит для джумла последних версий, начиная с 2.5 (соответствует версия компонента 2.1.9, для поздних – вплоть до 4.0.13).

Возможности

Назначение расширения (для информационных порталов и каталогов с картами) определили его большие возможности: добавление поиска, фильтров, списков объектов, объектов с метками (более 20 тысяч на карте без зависаний), обозначений в виде многоугольников, линий, окружностей, добавление собственных объектов. Добавлять точки на карту могут и сами пользователи (возможно с премодерацией).

Настройка

После установки пакета Lite находим «Яндекс карты» в компонентах.

карту (неограниченное количество);
категорию (для объединения карт по признаку);
объект (в менеджере объектов создаются метки, изображения, геометрические фигуры и линии для определенной карты или целой категории карт).

В первую очередь в графическом редакторе находим ту местность, которую вы желаете отобразить на сайте, отметить метками. Например, вводим в строку поиска Петербург. И с помощью быстрых подсказок находим город. Далее заполняем поля: «Название», «Псевдоним» (введёте на русском, а система сама подготовит для публикации url латинские буквы). При желании можно заполнить и поле «Описание» (если собираетесь отображать его на сайте).

Переходим в следующую вкладку настроек – «Поведения», где можно настроить «реакцию» карты на «поведение» мышки. Во вкладке «Элементы управления» можно включить: кнопку разворачивания карты на весь экран, панель поиска, панель пробок и т.д.

На вкладке «Метаданные» можно отобразить ключевые слова, описание для поисковиков. Во вкладке «Общие настройки» можно задать множество нюансов. Например, пользователю дать возможность кликом открывать всплывающее окно. Отключить или включить фильтр, отобразить его вверху или в любой из предложенных позиций.

Спустившись вниз с помощью бегунка, мы увидим «Список объектов». Если вы планируете создать несколько меток на карте, то стоит здесь в поле «Показать список объектов» выбрать позицию, например, сверху. Если объект будет только один, как в нашем случае - ЖК Элит плюс - то ставим здесь значение «Нет». Можно разрешить пользователям добавлять свои объекты, но раз мы создаём карты для сайта новостроек, то ставим здесь запрещающее «Нет».

Переходим к последней вкладке – «Настройки карты». Помимо окна карт и максимального масштаба можно выбрать тип карты. Вместо стандартной выберем «Гибрид». И не забудет сохранить все настройки - кнопка «Сохранить и закрыть» вверху. Одну карту мы создали, теперь можем перейти к созданию категории. Например, «Новостройки Петербурга». Для этого переходим в менеджер категорий (Компоненты-Яндекс карты в joomla), нажимаем «Создать». Вводим название и выбираем в соответствующем поле нашу карту «Новостройки Петербурга». Сохраняем и закрываем категории.

Теперь можно перейти к объектам.

Объекты мы находим также через компоненты joomla 3. Создаём и начинаем настраивать. Во второй вкладке «Вид объекта» можно выбрать его тип, например, установить как «метку». Во вкладке «Публикация» вводим ключевые слова. После всех настроек сохраняем и закрываем объект.

Чтобы отобразить карту на странице, её нужно создать. Например, в верхнем горизонтальном меню. Для этого переходим в "Менеджер меню". Находим горизонтальное и нажимаем, чтобы добавить новый пункт. Нажимаем "Создать".

Любую из созданных карт можно вставить на страницы сайта через модуль или в материал джумла. Например, отобразив карту со списком объектов на главной. Можно создать отдельный пункт меню для её отображения или для отображения нескольких карт, категорий.

Поработав с картами, категориями и объектами, можем зайти в настройки. Здесь вебмастеру открываются дополнительные возможности компонента Яндекс карт: можно редактировать описания, настраивать всплывающие окна, отображать списки категорий, карт, объектов. Можно отобразить на странице поле поиска сразу над списком объектов, установить ссылку «подробнее».

В расширенных версиях компонента доступны и другие настройки: карты местонахождения пользователей, карты материалов (в которых источник карты – материал джумла с «географической привязкой», т.е. адресом). В версию PRO встроены плагины вывода материалов ZOO и К2, плагин «Арендатор-Арендодатель» - для взаимодействия участников рынка недвижимости через удобную карту (владельцы добавляют предложения на карту, арендаторы бронируют через всплывающее окно).

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

Главные особенности:

распространяется бесплатно;
адаптивен (ширина может быть задана в процентах – карта растянется по ширине экрана);
подходит для всех версий начиная с joomla 2.5 и выше.

Настройки

Что можно изменить:

установить координаты для центра карты;
изменить масштаб, чтобы изначально карта в joomla открывалась в удобном виде (объекты были достаточно приближены);
для пользователей можно по умолчанию оставить на карте показ пробок, кнопку выбора списка типов карты (кнопка «слои»), прокрутку масштаба с помощью мыши, оставить на карте или убрать поле поиска адреса;
прописать в пикселях ширину и высоту карты;
установить для показа объекта собственную иконку (выбрав изображение в медиа-менеджере), для остальных объектов можно выбрать флажки из списка стандартных;
добавить точку, введя координаты и описания (для оформления описания на карте можно использовать HTML-код).

Разработчик в скором времени обещает установить в админпанель модуля возможность загрузки карты любого типа (в виде схемы, спутника или гибрида).

Zh YandexMap

Расширение для установки Яндекс карт на сайт Zh Yandex Map от разработчика Dmitry Zhuk позволяет настроить оформление карты, назначить расположение объектов (добавив метки) и даже отобразить список меток. Среди дополнительных параметров – предоставление пользователям возможности ставить на карту свои метки.

Главные особенности:

распространяется бесплатно;
не адаптивен (ширина и высота задается в пикселях);
последняя версия работает на joomla 3.x.

Возможности

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

С помощью расширения вы сможете:

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

Настройка

Настройка производится в зависимости от ваших целей. Можно создать обычную карту или воспользоваться всеми возможностями расширения.

Поместить любую из созданных карт на страницы сайта (в определенную позицию) можно как с помощью модуля, так и в качестве отдельной страницы на сайте.

Яндекс карты предлагают нам два варианта использования:

В каком случае использовать эти варианты.

Конструктор можно использовать если вам нужна обычная карта с простой меткой. Это почти 80% случаев.
Например, чтобы обозначить офис или магазин на карте города.

Если для метки нужно описание, ссылка на сайт или что-то ещё, то без API не обойтись.
Выглядит это примерно так (плюс индивидуальный вид метки на карте):

Рассмотрим по-подробнее каждый из вариантов и при помощи каких расширений это можно реализовать.

Вариант 1. Вывод карты через конструктор.

Если нужна простая карта, то идём в конструктор и создаём новую карту.
Указываем её название и описание.

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

Далее жмём "Сохранить и продолжить".

После чего нужно указать размер окна карты, либо растянуть её по ширине. Например для лендинга.
Выбрать тип карты. Чаще всего используется интерактивная, которую можно двигать. Она удобнее.

И в конце получаем код для вставки на свой сайт.

Вставить карту можно как в статью, так и в модуль.
Обратите внимание, что код карты содержит яваскрипт код, который обрезается редактором Joomla.
Поэтому для вставки можно использовать наш модуль JT Code или плагин Sourcerer

Вот собственно и всё.

Вариант 2. Вывод карты при помощи API

Один из мощных компонентов - это Zh Yandex Map, он бесплатный и использует последнюю версию API 2.0 или 2.1 (на выбор).

У компонента очень много возможностей, поэтому мы рассмотрим только базовые, которые используются чаще всего.
А именно вывод карты с меткой и расширенным описанием.

Плюс компонента в том что с ним в комплекте идёт плагин, который позволяет вставлять карту в материал при помощи специального тега. Поэтому если у вас на сайте будет много карт, то создавать для каждой карты свой отдельный модуль не нужно.

Далее переходим в раздел "Карты" и создаём новую карту.

В настройках указываем:

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

Настроек ещё полно, но для обычной карты на этом можно закончить и перейти к созданию метки.

Для создания метки переходим в раздел Метки.

наименование
дополнительный HTML текст, вот здесь можно вставлять что угодно: текст, ссылки, изображения и т.д.
широта и долгота метки, тоже можно взять на обычной карте, и в случае чего потом подредактировать.
наименование карты, тут выбираем созданную нами карту на предыдущем шаге.
группу меток или категорию метки, если вы их создавали.

На вкладке "Атрибуты представления" можно настроить вид метки.

Сделать отступы, изменить иконку и т.д.
Чтобы использовать стандартные иконки Яндекса, выбираем для метки - предопределённая иконка.
И ниже в поле "Предопределённая стандартная иконка" вставляем её название. Его можно взять кликнув по кнопке "Список стандартных иконок".
Из названия иконки нужно убрать кавычки.

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

Вставка яндекс карты в материал Joomla.

В нужной статье (или модуле) достаточно вставить специальный тег
Где 11 - это ID вашей созданной карты.

Прим: заметил что при вставке e-mail адреса в HTML-описание метки карта работает некорректно. Это на всякий случай.

Также можно создавать несколько меток на одной карте и объединять их в категории или группы.
Можно создавать маршруты, пути и разные типы карт.
Настроек у компонента очень много, чтобы разобраться с ними, нужно понять возможности API Яндекс карт. Они очень большие.

Ну а для обычной карты достаточно того что здесь написано.
Документацию к этому компоненту можете посмотреть на сайте разработчика >>
Там же можно найти компонент для карт Google и Baidu.

На многих сайтах в разделе «Контакты» можно встретить карту или маршрут проезда до нужного посетителю объекта; карты могут присутствовать не только в «Контактах», но и в других разделах сайта, причем в большом количестве. Раньше, как правило, использовались статические изображения этих карт, но с недавнего времени появилась возможность вставлять и динамические карты при помощи сервисов, к примеру, Yandex или Google.

Собственно в данном материале мы и поговорим, как можно вставить Yandex или Google map себе на сайт.

Заметим, что не стоит путать Yandex и Google map с картой сайта, это принципиально разные вещи.

Вставляем Yandex map в Joomla сайт

Начнем, наверное, с Яндекса. Yandex map можно вставить на сайт несколькими способами: сгенерить URL в разделе Яндекс. Карты и затем поставить на сайт, или же задействовать модуль для Joomla. Рассмотрим первый вариант, ведь не все хотят нагружать свою площадку еще одним инструментом.

Тут отметим, что код можно получить как для статической, так и для динамической карты. Чтобы это сделать, переходим на «Сайт – Мой профиль» и в поле «Редактор» изменяем свой редактор на CodeMirror. После этого переходим в «Менеджер плагинов» и проверяем активен ли плагин «Контент – Загрузка модулей»; теперь переходим в «Менеджер модулей» и там создаем «HTML-код». Можно его назвать, к примеру, yandex_map, а в поле «Позиция» впишите first_map, что будет говорить о названии вашей позиции. В поле «Пользовательский текст» теперь нужно вставить строку кода.

Все сохраняем, и после переходим к вставке кода:

Выделить нужный вам объект можно также в ручном режиме, просто перетащив метку или задав координаты в определенном поле. После нужно установить масштаб карты, выставить ширину и высоту, а также тип. Если нужна подробная настройка по настройке модуля Яндекс карт, то ознакомиться с ней вы можете на оф. ресурсе по URL.

Если все «Ок», то сохраняемся, выбираем вариант шаблона и выводим модуль. Если карту необходимо разместить в определённом месте статьи, то поступить можно точно так, как и было описано в первом способе. Но дабы не парить себе голову, можно просто вставить следующий код: < loadmodule mod_flyleaf_ymap >. Чтобы разместить на странице контактов вашу карту, необходимо внести изменения в файл contact/tmpl/default.php, где в нужном месте необходимо подставить значение:

Теперь вы знаете, как вставить Яндекс Карты для Joomla на сайт, поэтому перейдем к рассмотрению карт от Google.

Вставляем Google map на Joomla сайт

С Google map ситуация обстоит практически аналогичным образом, и при этом также есть два способа вставки карт на сайт. Итак, рассмотрим первый способ.

Тут в главных параметрах можно изменить тип карты, тип ввода адреса (координаты или строка); в адресной строке вводим адрес, причем можно писать и на русском языке. Если необходимо, то можно изменять значения ширины и высоты карты, а также масштабировать ее. При помощи переключателя можно включать/отключать отображение управлением карт Google. Тут стоит открыть «Управление маркерами» и добавить маркер или несколько. Далее заполняйте нужные поля и сохраняйте все. Ну а далее остается опубликовать модуль и вывести его на сайт.

Конструктор Yandex map в виде модуля Mod Xdsoft Ymaps

Собственно этот плагин избавляет от необходимости копирования и вставки кода. То есть при его помощи создать Yandex map становится еще проще. Достоинства продукта:

возможность установки размеров карты, ее центра, масштаба и т.д.;
добавление элементов для управления картой;
добавление неограниченного количества объектов;
vvvvобъекты могут быть показаны в виде полигона, круга, метки или ломаной;
каждой карте отдается свой id, поэтому на одной странице можно разместить несколько карт;
конструктор поддерживает русский и английский язык;
есть возможность указания точного местоположения пользователя;
можно отображать уровень пробок на трассах.

Установка ничем не отличается от установки прочих модулей; если она была произведена успешно, то в списке модулей появится «Конструктор Yandex map от XDSoft» (выбрать его можно в «Выборе типа модуля»). Собственно получить на сайт модуль можно по URL.

Читайте также: