Яндекс карта для Joomla 3

От автора: приветствую Вас уважаемые читатели. Согласитесь что очень удобно вместе с адресом расположения офиса компании, на определенной странице сайта, отображать карту сервиса Яндекс, для более точного визуального представления местности. Но такая на первый взгляд простая вещь как Яндекс карта для Joomla 3, вызывает, как правило, множество вопросов у начинающих веб-мастеров. Поэтому в данной статье мы с Вами поговорим о том, как добавить вышеуказанный элемент на страницу Вашего сайта.

Сразу же хотел бы отметить, что в CMS Joomla яндекс карты, добавляются достаточно просто, так как карта, по сути, генерируется специальным сервисом системы Яндекс. А значит, все что от Вас требуется, это добавить специальный код на интересующую страницу Вашего сайта, который Вы получите при создании и настройке карты. Конечно, для начала работы Вам обязательно необходима учетная запись Яндекса, поэтому если у Вас ее нет, пройдите регистрацию на данной странице.

Для создания карт, в сервисе Яндекс, предусмотрен простой и удобный конструктор, который вы найдете по следующей ссылке.

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

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

Далее выполним поиск интересующего адреса, используя специальное поле над блоком карты. К примеру, для Украины, давайте найдем улицу Университетская в городе Харьков. Соответственно, если адрес найден, то он будет отображаться на карте. При этом, используя ползунок масштаба слева, Вы можете увеличить или уменьшить требуемый участок карты.

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

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

После этого сервис Яндекс Карты, предлагает выбрать размер будущей карты, который Вы можете определить либо, используя текстовые поля слева, или используя мышь, простым перетаскиванием, вручную определить область карты, отображаемую пользователям Вашего сайта. Так же в левом блоке, предоставляется возможность выбора типа карты:

Завершив все необходимые настройки, кликаем по кнопке “Получить код карты” и копируем сгенерированный код.

Теперь давайте поговорим о том, как добавить яндекс карту на сайт Joomla. Итак, полученный код мы можем добавить непосредственно в интересующее место шаблона, или, в один из материалов Joomla, или же в страницу отображения контактной информации конкретного пользователя. В качестве примера, я использую последний вариант.

Как Вы видите, скопированный код – это по сути скрипт языка JavaScript, а значит при добавлении его в текстовое поле в котором используется визуальный редактор, теги script и все их содержимое, будут блокироваться. Поэтому, на время, отключим визуальный редактор в глобальных настройках Joomla.

Далее переходим в менеджер контактов и открываем контакт, в информации которого необходимо отобразить карту. Затем, на вкладке “Дополнительная информация” в текстовую область добавляем скопированный корт будущей карты.

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

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

Хотел бы отметить, если Вам необходимо добавить карту в определенное место шаблона то вы можете добавить скопированный код непосредственно в один из файлов шаблона, при этом конечно необходимо знать их структуру. Если Вы не знаете, из каких элементов состоят шаблоны Joomla, Вам будет полезен наш мини-курс Создание уникального шаблона на Joomla.
Так же отобразить карту на страницах сайта Вы можете, используя модуль яндекс карт для joomla, к примеру Yandex Maps Creator. Но на мой взгляд, ручное добавление кода, наилучшее решение для данной задачи.

Всего Вам доброго и удачного кодирования!!!

Комментарии Вконтакте:

Комментарии (4)