<
  • Главная
Статьи

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

  1. Установка компонента yandexmap
  2. Отримання API - ключа карти Яндекс
  3. Додавання Яндекс.Карти на 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-ключа"

А для цього на сторінці просто кликаю по посиланню сторінку отримання API-ключа

і мене перекидає на сторінку з формою його отримання. Отримати даний ключ можна тільки при наявності аккаунта в Яндекс, так як він у мене є те я просто проходжу процедуру авторизації, клікнувши на посилання "Авторизуйтесь" (стрілочка 1), якщо ж у Вас немає облікового запису, то натисніть на посилання "зареєструйтеся" ( стрілочка 2)

Отримати даний ключ можна тільки при наявності аккаунта в Яндекс, так як він у мене є те я просто проходжу процедуру авторизації, клікнувши на посилання Авторизуйтесь (стрілочка 1), якщо ж у Вас немає облікового запису, то натисніть на посилання зареєструйтеся ( стрілочка 2)

Після того як ми успішно авторізуемся відкривається сторінка з формою отримання ключа, який буде прив'язаний до конкретного сайту, тому вказуємо спочатку адреса сайту, де хочемо вставити Яндекс.Карти (стрілочка 1), потім приймаємо угоду користувача по використанню даного сервісу і тільки потім натискаємо на кнопку "Отримати API-ключ" (стрілочка 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

Можливо Вам це буде цікаво:



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

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

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью