Модуль яндекс карты для joomla 3.4. JB Maps v1.2.5 - модуль карт от Google для Joomla

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Статическая – карта в формате простого изображения, которая используется только для просмотра определенного участка.

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

На мой взгляд, гораздо проще использовать первоисточник, а именно конструктор карт от самого Яндекса.

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

Чтобы рядом с меткой выводить название выбираем тип С подписью .

Сохраняем результат и на следующем шаге задаем настройки размеров. Чтобы ширина карты подстраивалась под размер экрана устройства активируем опцию Растянуть по ширине .

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

Данный код можно вставить в материал, модуль и просто в исходный код шаблона.

Немного подробнее про вставку кода в материал. Например, необходимо добавить карту на страницу с контактной информацией магазина.

Если на сайте используется тестовый редактор JCE, то с настройками по умолчанию он не позволяет вставлять в материал javascript код. Исправить ситуацию поможет опция Разрешить Javascrip в Компоненты > Редактор JCE > Профили редактора > Default > Параметры редактора > Расширенные .

После этого на странице редактирования материала нажимаем кнопку для просмотра исходного кода и вставляем наш скрипт.

Для вывода карты в модуле просто создаем модуль с типом HTML-код и аналогично вставляем код карты.

Все очень просто и нет никакой необходимости в установке сторонних расширений.

mod_flyleaf_ymap_j32.zip

Уже очень давно вышла cms Joomla 3, а нормального модуля яндекс карт не было. Сейчас уже имеем Joomla 3.2, а модуля не было до сегодняшнего дня.

Ранее(при Joomla 2.5) я использовал модуль - http://flyleaf.su/blog/jo omla/modul-yandeks-kart-s -rasshirennymi-nastroykam i-dlya-joomla-2.5.html
Но на Joomla 3 данный модуль хоть и ставился, но работал некорректно. Пришлось немного ковырнуть код и портировать модуль под Joomla 3.2
Думаю стоит его добавить в раздел плагины. Скачивайте и пользуйтесь - mod_flyleaf_ymap_j32.zip

","contentType":"text/html"},"proposedBody":{"source":"

","contentType":"text/html"},"authorId":"173188780","slug":"44199","canEdit":false,"canComment":false,"isBanned":false,"canPublish":false,"viewType":"old","isDraft":false,"isOnModeration":false,"isSubscriber":false,"commentsCount":19,"modificationDate":"Fri Mar 14 2014 15:25:00 GMT+0000 (UTC)","showPreview":true,"approvedPreview":{"source":"

","html":"Уже очень давно вышла cms Joomla 3, а нормального модуля яндекс карт не было. Сейчас уже имеем Joomla 3.2, а модуля не было до сегодняшнего дня.","contentType":"text/html"},"titleImage":null,"tags":[{"displayName":"PHP","slug":"php","categoryId":"17081730","url":"/blog/mapsapi??tag=php"},{"displayName":"Joomla","slug":"joomla","categoryId":"5580868","url":"/blog/mapsapi??tag=joomla"},{"displayName":"API 2.0","slug":"api-2-0","categoryId":"118618156","url":"/blog/mapsapi??tag=api-2-0"},{"displayName":"модули","slug":"moduli","categoryId":"9794493","url":"/blog/mapsapi??tag=moduli"}],"isModerator":false,"publishCount":1,"commentsEnabled":true,"url":"/blog/mapsapi/44199","urlTemplate":"/blog/mapsapi/%slug%","fullBlogUrl":"https://yandex.ru/blog/mapsapi","addCommentUrl":"/blog/createComment/mapsapi/44199","updateCommentUrl":"/blog/updateComment/mapsapi/44199","addCommentWithCaptcha":"/blog/createWithCaptcha/mapsapi/44199","changeCaptchaUrl":"/blog/api/captcha/new","putImageUrl":"/blog/image/put","urlBlog":"/blog/mapsapi","urlEditPost":"/blog/56a94059b15b79e31e0ced89/edit","urlSlug":"/blog/post/generateSlug","urlPublishPost":"/blog/56a94059b15b79e31e0ced89/publish","urlUnpublishPost":"/blog/56a94059b15b79e31e0ced89/unpublish","urlRemovePost":"/blog/56a94059b15b79e31e0ced89/removePost","urlDraft":"/blog/mapsapi/44199/draft","urlDraftTemplate":"/blog/mapsapi/%slug%/draft","urlRemoveDraft":"/blog/56a94059b15b79e31e0ced89/removeDraft","urlTagSuggest":"/blog/api/suggest/mapsapi","urlAfterDelete":"/blog/mapsapi","isAuthor":false,"subscribeUrl":"/blog/api/subscribe/56a94059b15b79e31e0ced89","unsubscribeUrl":"/blog/api/unsubscribe/56a94059b15b79e31e0ced89","urlEditPostPage":"/blog/mapsapi/56a94059b15b79e31e0ced89/edit","urlForTranslate":"/blog/post/translate","urlRelateIssue":"/blog/post/updateIssue","urlUpdateTranslate":"/blog/post/updateTranslate","urlLoadTranslate":"/blog/post/loadTranslate","urlTranslationStatus":"/blog/mapsapi/44199/translationInfo","urlRelatedArticles":"/blog/api/relatedArticles/mapsapi/44199","author":{"id":"173188780","uid":{"value":"173188780","lite":false,"hosted":false},"aliases":{},"login":"art-apple-studio","display_name":{"name":"art-apple-studio","avatar":{"default":"173188780","empty":false}},"address":"","defaultAvatar":"173188780","imageSrc":"https://avatars.mds.yandex.net/get-yapic/173188780/islands-middle","isYandexStaff":false},"originalModificationDate":"2014-03-14T11:25:47.000Z","socialImage":{"orig":{"fullPath":"https://avatars.mds.yandex.net/get-yablogs/47421/file_1456488726678/orig"}}}}}">

Многие привыкли использовать Google карты на своих сайтах, но стоит отметить, что неплохой альтернативой могут быть Яндекс карты, которые также обладают достаточно хорошим функционалом. Компонент Zh YandexMap, предоставляет весь спектр возможностей по работе с картами, их размещением, созданием дополнительных элементов и всего прочего. Теперь Яндекс карты Joomla стали более понятными и доступными для рядового пользователя. Благодаря наличию плагина и модуля, можно будет максимально интегрировать карты на свой проект, а общие возможности компонента, порадуют тонкими настройками и доступным функционалом. Стоит отметить, что при всей своей продвинутости, это решение полностью бесплатное. Так что стоит более детально ознакомиться с тем, на что же именно годятся эти карты.

Функционал Zh YandexMap

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

Легкое создание и отображение любого количества карт;

Доступны такие параметры для корректировки, как: тип карты, масштабирование, а также управление типом карты. Поддерживается очень удобная панель управления;

Встроенный поиск;

Поддерживается управление трафиком, можно выводить информацию по пробкам;

Есть мини – карта;

На карте поддерживается создание маршрутов;

Создание любого количества меток, с поддержкой установки пользовательского образа на метку (любого изображения);

Для карты можно указывать YMapsML документ;

К каждому маркеру можно прикреплять изображение и ссылку;

Поддерживается создание групп маркеров, а также доступна функция скрытия и показа этих групп;

Поддерживается работа с диспетчером объектов для меток. Можно будет включать отображение меток, только при использовании определенного масштаба;

Можно указывать следующий ряд документов для карт: KML, GPX , ну и вышеуказанный YMapsML (можно указывать не только один файл);

В метках можно будет указывать контактные данные;

Карты поддерживают «слои пользователя», что открывает возможность использования пользовательских карт;

Можно будет указывать, какие именно элементы управления картой будут выводиться;

На картах можно строить линии любой ломаной формы, чтобы прокладывать маршруты для пешеходов;

Модуль будет выводить карту со всеми прикрепленными элементами в нужной позиции;

Плагин позволит размещать карту в любой статье.

Такое решение, как Zh YandexMap, открывает самые широкие перспективы для тех, кто ведет бизнес в сети. С такими картами, пользователи сайта легко отыщут офис, магазин или целую компанию в реальной жизни, получая всю необходимую дополнительную информацию. Это действительно одно из самых функциональных решений для этого сервиса.

Простота в настройке

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

Сегодняшнюю статью я хочу посвятить компоненту Xmap — карта сайта для Joomla 2.5, joomla 3.0. Я всегда на всех своих проектах ставлю данный компонент, т.к. карта сайта положительно влияет на индексацию сайта в поисковых системах, особенно, если сайт имеет сложную структуру.

Давайте же разберем, где данный компонент можно скачать, как его установить и как настроить. Первое, что хочу сказать — данный компонент распространяется бесплатно. Идем на сайт разработчика и качаем Xmap последней версии.

Устанавливаем данное расширение через стандартный инсталлятор Joomla — Расширения -> Менеджер расширений. Загружаем скачанный архив через кнопочку «Обзор» и жмем кнопку «Загрузить и установить».

Получаем сообщение о том, что компонент успешно установлен. Далее идем в системное меню Компоненты -> Xmap. Сразу скажу, что русского языка тут нет, но я поискал в интернете и нашел довольно неплохой перевод для Xmap Joomla 2.5, Joomla 3.0. Скачать его можно . Устанавливаем языковой пакет как обычное расширение joomla через стандартный инсталлятор. После установки можете вернуться в панель управления Xmap и вы заметите, что все теперь на русском. Если вы заметили Xmap нам выдает вот такое сообщение (после перевода) — «Xmap обнаружило, что данное расширение поможет Вам поместить больше содержимого в Вашу карту сайта, но оно отключено, Вы должны включить его вручную перейдя в менеджер расширений: com_content, com_weblinks «. Нам необходимо включить некоторые расширения, чтобы включить все ссылки в карту сайта. Где их включать? Об этом ниже.

В Xmap имеются две вкладки: Карты сайта и Расширения.

Во вкладке «Карты сайта» открывается список созданных карт сайта (их может быть много). Давайте создадим первую карту сайта, не отходя, так сказать, от кассы. Чтобы создать карту сайта жмем по оранжевой кнопочке «Создать». Далее, вводим заголовок, например, карта сайта. В поле «Алиас» можно ничего не вводить, он заполняется транслитом из заголовка. Выставляем Состояние на «Опубликовано». Доступ — «Public», т.е. показывать карту сайта всем. В поле «Вводный текст» можете написать какой либо текст, который будет отображаться до карты сайта. Вводный текст помимо текста может содержать в себе картинки, видео и т.д.

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

Приоритет — здесь можно задать приоритет страницам, относящиеся к меню. С помощью выставления приоритета сообщается поисковым системам о важности той или иной страницы. Чем выше приоритет, тем выше важность страницы. Приоритет отмечается в xml-карте сайте, а в html-карте сайта никак не отображается. Например, главному меню можно указать приоритет по выше, а другим меню по ниже. Приоритет указывается от 0.1 до 1 с шагом в 0.1. Данный параметр является не особо важным и на индексацию страниц не влияет.

Частота обновления — здесь выставляем интервал той периодичности с которой обновляются разделы данного меню, т.е. если материалы данного меню обновлюется несколько дней в неделю, то лучше выставить «weekly», если каждый день, то — «daily» и т.д. Данная опция сообщает поисковым системам через xml-карту (которая создается автоматически) с какой периодичностью обновляется ваш сайт. Только не вздумайте обмануть поисковую систему, не получиться. Выставляйте реальные интервалы.

Во вкладке «Опции» нам доступны следующие пункты:

Вводный текст — выставляем «Yes», если хотим показать вводный текст в html-карте сайта, который вводили в большое текстовое поле, иначе, выставляем «No».
Заголовок меню — выставляем «Yes», если хотим видеть заголовок меню над ссылками в html-карте сайта.
Имя css-класса — здесь можем задать уникальный класс для таблицы стилей, чтобы оформить html-карту сайта по своему усмотрению.
# столбцов — с помощью данной опции можем указать количество столбцов карты сайта. Это актуально, если у нас в предыдущей вкладке выбрано больше одного меню.
Изображение внешней ссылки — если в карте сайта существует ссылка, ведущая на сторонний ресурс, или как говорят, внешняя ссылка, то она может помечаться специальной иконкой. Иконку можно найти по следующему адресу — /components/com_xmap/assets/images.
Сжимать XML — здесь советую выставить «Yes». Это нужно для уменьшения размера файла и как следствие быстрой загрузки. Но иногда это может вызывать проблемы для поисковых ботов. В таком случае можно выставить переключатель на «No».
Красивый XML — данная опция не является обязательной, она лишь визуально придает более менее приятный вид xml-карте сайта. Если у вас буду проблемы с вашей картой сайта, то можете выставить переключатель на «No».

Вкладка «Новостная карта сайта » — необходима, если у вас сайт присутствует в гугл новостях . В поле «Название публикации » вводим название вашей новостной публикации в Гугл без кавычек, например, Новости сайта zaurmag.

Теперь когда мы пробежались по всем пунктам можем нажать на кнопку «Сохранить» или «Сохранить и закрыть». Теперь у нас в списке карт сайт имеется одна карта сайта.

Просмотреть xml-карту сайта можно нажав на ссылочку «Xml карта сайта», страничка откроется в новой вкладке. Также открываем и карту сайта новостей, если сайт добавлен а Гугл новости.

Вот как выглядит xml-карта сайта одного из примерных моих сайтов. В верхней части нам сообщается сколько в карте присутствует урлов, идет список самих урлов страниц и обратите внимание на колонки Частота изменения и Приоритет. Здесь выставляются те параметры, что мы выставляли во вкладке «Меню «. Далее на что хотел бы обратить ваше внимание, это ссылка «Войдите» в верхней части окна. Для чего это нужно?

После авторизации во фронтальной части сайта с правами супер администратора (для авторизации откройте любую страницу фронтальной части сайта и через форму авторизации авторизуйтесь, далее после вернитесь в карту сайта и просто перезагрузите страничку) нам доступно редактирование нашей xml-карты сайта, а именно:

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

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

Ну вот я думаю с xml-картой сайта мы разобрались и теперь двигаемся дальше. Далее мы вернем в панель управления Xmap и разберем вторую вкладку «Расширения» . А как же html-карта сайта спросите вы? А html-карту сайта создадим чуть позже. Обо всем по порядку.

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

Xmap — Content Plugin — выводит ссылки в карте сайта из стандартного компонента материалов Joomla;
Xmap — Kunena Plugin — выводит список всех рубрик и тем созданных на форуме, работающего на компоненте Kunena (но данный плагин почему то у меня не работал);
Xmap — Mosets Tree Plugin
Xmap — SobiPro Plugin
Xmap — Virtuemart Plugin — плагин интернет магазина, работающего на платформе Virtuemart, выводит ссылки всех рубрик и товары магазина.
Xmap — WebLinks Plugin

Щелкнув по вкладке «Расширения», мы тем самым попадем в менеджер плагинов Joomla, только попав в расширения через Xmap у нас автоматически срабатывает фильтр по расширениям Xmap.

Если у вас установлен какой либо компонент, помимо тех, что перечислены выше, то плагин для Xmap вам необходимо ставить отдельно. Он устанавливается через стандартный инсталлятор joomla.

На скрине выше видно, что помимо стандартных плагинов установлен и включен плагин Xmap для компонента K2, т.к. на примерном сайте контент строиться на данном компоненте.

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

Я буду показывать на примере главного меню. Идем в менеджер меню -> главное меню -> создать пункт меню. Здесь как обычно вводим заголовок, а вот тип пункта меню выбираем Xmap -> HTML карта сайта.

После этого в правой колонке во кладке «Обязательные параметры » выбираем созданную нами в Xmap карту сайта.

После этого сохраняемся и переходим на наш сайт. Щелкаем в главном меню по пункту «Карта сайта».

Вот что у меня получилось. Смотрится довольно неплохо. По дереву ссылок можно определить вложенность статей.

Ну вот, наверно, на этом я закончу свою статью, посвященную Xmap. Если у вас возникнут вопросы, то задавайте их в комментариях, с удовольствием отвечу.