Добавить Яндекс.Карту в сайт на Joomla

Добрый день, уважаемые читатели! Решила я обратить сегодня Ваше внимание на очень интересную и в последнее время популярную возможность добавления карты местности на сайт. Конечно, многие сейчас подумают: “ Для чего это делать, ведь есть Яндекс.Карта и там можно все посмотреть”, но не стоит забывать про удобство посетителей сайта и стоит ли его перенаправлять на другой сайт, если возможно сгенерировать  данную карту на свой ресурс, который создали на joomla. И поэтому будем сейчас добавлять Яндекс.Карту на сайт с помощью компонента yandexmap.

Естественно, добавлять карту на все подряд сайты не стоит – в этом нет необходимости, а вот если тематика проекта – путешествия, агентства недвижимости или любого другого агентства, клиентам которого Вы хотите указать свое местоположение на карте города, то компонент yandexmap идеально подходит для воплощения задуманного. Но для этого нам необходимо скачать сам компонент и получить api-ключ, благодаря которому и будет генерироваться карта.

Установка компонента yandexmap

Итак, первым делом скачиваем компонент  yandexmap. Полученный архив распаковываем и получаем две .zipовских папки: com_yandexmap_1.2.0.zip и plg_yandexmaps_v2.0.zip. Это сам компонент и плагин, который обязателен к установке и теперь остается только их закачать на движок. Для этого заходим в административную панель нашего сайта на Joomla и выбираем Расширения – Установить\Удалить и на открывшейся странице выбираем тип закачки файлов на движок – “Закачать файл пакет”

Нажимаем на кнопку “Выберите файл”(стрелочка 1), в выпавшем окне выбираем место где лежит наш архив com_yandexmap_1.2.0.zip и затем закачиваем его, нажав на кнопку “Загрузить файл &Установить” (стрелочка 2). В итоге появляется окно с сообщением что компонент успешно установлен, а если мы зайдем во вкладку Компоненты, то увидим пункт Яндекс.Карты (стрелочка 1), нажав на который выпадает окно с пунктами настроек (стрелочка 2).

Таким же образом устанавливаем и plg_yandexmaps_v2.0.zip

Для продолжения установки Яндекс.Карты на joomla нам необходимо включить установленный плагин, чтобы это осуществить проходим в административной панели в Расширения – Плагины. Открывается список установленных плагинов, в котором ищем строку Яндекс.Карты

и активируем его.

Получение API — ключа карты Яндекс

Чтобы продолжить устанавливать Яндекс.Карту нам необходимо получить api – ключ к ней на сервисе http://api.yandex.ru/maps/jsapi/doc/dg/tasks/quick-start.xml. Данный ресурс предоставляет возможность сгенерировать карту на любом сайте, но это уже совсем другая история, так как меня интересует в данный момент получение ключа для сайта на joomla.

А для этого на открывшейся странице просто кликаю по ссылке “страницу получения API-ключа”

и меня перебрасывает на страницу с формой его получения. Получить данный ключ можно только при наличии аккаунта в Яндекс, так как он у меня имеется то я просто прохожу процедуру авторизации, кликнув на ссылку “Авторизуйтесь” (стрелочка 1), если же у Вас нет аккаунта, то нажмите на ссылку “зарегистрируйтесь” (стрелочка 2)

После того как мы успешно авторизуемся открывается страница с формой получения ключа, который будет привязан к конкретному сайту, поэтому указываем сначала адрес сайта, где хотим вставить Яндекс.Карту (стрелочка 1), затем принимаем пользовательское соглашение по использованию данного сервиса и только потом нажимаем на кнопку “Получить API-ключ” (стрелочка 2)

И вот только после этого открывается страница с мои api –ключом, для генерации Яндекс.Карты, который я благополучно копирую.

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

Добавление Яндекс.Карты на joomla

Полученный ключ необходимо активировать в Настройках нашего компонента yandexmaps. Для этого в административной панели сайта заходим в Компоненты – Яндекс.Карты и на открывшейся странице Панели управления компонента кликаем по кнопке “Настройки”, расположенной в правом верхнем углу.

Откроется окно, где в строке “Yandex Maps API ключ” вставляем скопированный нами ранее ключ, а вот настройки пункта “Выводить на экран информацию о Yandex” зависит от ваших предпочтений, но в любой момент можно их изменить. Сохраняем произведенные изменения нажав на кнопку “Сохранить”

Все ключ активировали, теперь осталось создать только карту, маркер и вставить Яндекс.Карту в статью.

Первоначально нам необходимо создать карту, для этого в панели управления компонентом кликаем по пункту “Карты” – “Новый”

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

Итак, рассмотрим основные настройки:

— Заголовок – здесь прописываем название нашей карты на кириллице

— Псевдоним – тот же заголовок только на латинице

— Ширина и Долгота – здесь прописываете координаты Вашего того места, которое хотим чтобы отражалось на карты. Для помощи нам дается кнопка “Установить координаты”, нажав на которую появится окно, где в верхней строке достаточно будет указать необходимый адрес и нажать на кнопку “Получить маршрут”

И таким образом координаты у нас в настройках выставятся автоматически.

— Увеличение – здесь можно указать во сколько раз будет увеличиваться карта при клике мыши или движением колесика.

— Ширина и Высота карты – здесь указываем в пикселях размер карты, который исходит от возможностей страницы ее отражения. Я для свой установила 595 на 400

— Версия API Yandex – оставляем по умолчанию

— Опубликовать – здесь ставим галочку в положение “да”

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

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

На приведенном выше скриншоте мы видим, что в графе «Заголовок» отразилось название созданной мною карты, в графе «Опубликовано» стоит зеленая галочка, которая показывает, что карта включена, id данной карты 1, а так же есть и графа «Код плагина», где прописано два варианта кода данной карты, это:

{yandexmaps view=map|id=1} — вставить карту на страницу или в контент сайта

или же в модальном окне {yandexmaps view=link|id=1|text=Map}

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

Теперь только осталось создать маркер для нашего адреса, чтобы это осуществить заходим в панели управления компонента yandexmaps в Маркеры – Новый

Для начала следует прописать основные настройки маркера:

— Заголовок балуна – здесь указываем точный адрес

— Заголовок метки – чтобы не путаться прописываем тоже что и в первом поле

— Карта – здесь указываем для какой карты следует применить данный маркер

— Опубликовано – ставим галочку в положение “да”

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

Вот теперь можно зайти на страницу, где мы хотели видеть отражение Яндекс.Карты и посмотреть что же у нас получилось

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

Такая карта может появиться и на Вашем сайте, которая поможет Вашим клиентам ориентироваться в городе.

На сим я заканчиваю, поставленная задача – добавить Яндекс.Карту на сайта joomla мною выполнена. Вам успехов в Ваших начинаниях и до новых встреч на lediseo.ru

Вам понравилась статья? Расскажите о ней друзьям!