Як вставити Яндекс карту на сайт? Інструкція, як розмістити карту Яндекса на сайті

Давайте розглянемо, як вставити Яндекс карту на сайт, попередньо створивши її в конструкторі. Процес вставки може бути неймовірно легким, або ж нести деякі складності, в залежності від масштабів вашого проекту.

Як вставити Яндекс карту на сайт: вибір очевидний

Якщо ви створюєте сайт-візитку, блог або нескладний інтернет магазин, то вам буде достатньо базових можливостей наявного конструктора. У такому випадку вставити Яндекс карту на сайт завдяки спеціальним кодом зможе користувач, який не має спеціальних знань. Якщо підійти до справи з усією грунтовністю, правильне складання схеми проїзду, або розрахунок ціни доставки за вказаною користувачем місця призначення може значно поліпшити функціональність сайту і зробити відвідувача новим покупцем.

Інакше справа йде, якщо вам необхідно вийти за межі конструктора, не просто розмістити карту Яндекса на сайті, а створити щось грандіозне і неповторне. У такому випадку вам знадобиться досвідчений програміст, який знайомий з роботою ДжаваСкрипт.

Приховані можливості

API Яндекс.Карт дозволяє накласти шар із зазначенням пробок на власному сайті, однак для реалізації подібної задумки можливостей конструктора не вистачить. Крім збереження створених вами карт, в API конструкторі відтепер не потрібне отримання ключа для власного сайту, проте деякі розширення CMS можуть ці ключі попросити.

Отримати такий інструмент можна в спеціальному розділі сайту, ввівши адресу вашого ресурсу. Однак повернемося до питання про те, як вставити Яндекс карту на сайт і до конструктора. Все потрібне тут є.

Організація конструктора

Інструменти, за допомогою яких можна нанести мітки на карту, знаходяться на верхній панелі, при цьому вони складаються з 4 кнопок. Перша дає можливість поставити мітку у формі великої коми, її можна розфарбувати різними кольорами, дати опис, а також присвоїти номер. Мітка ставиться через активацію даної кнопки, а також клік по потрібній області на схемі.

Позначення завжди можна посунути, утримавши ліву кнопку мишки, або видалити. Перш ніж вставити карту Яндекс, скористайтеся можливостями та інших інструментів. Далі уваги заслуговує можливість «Малювання ліній». Вона стане в нагоді для показу шляху до офісу вашої компанії від станції метро або зупинки транспорту.

Намалюйте багатокутник

Конструктор включає ще один важливий інструмент, який отримав ім`я «Малювання

багатокутника ». Необхідний він, щоб підсвітити за допомогою фонової заливки ті об`єкти або будівлі, які ви бажаєте позначити на схемі проїзду, до них також будуть вести маршрути, описані вище.

Необхідно активувати інструмент і планомірно позначити весь об`єкт по кутах, далі клікнути по вузловій точці, нарешті, вибрати функцію «Завершити». У підсумку з`явиться форма, і в ній можна буде задати товщину для лінії обведення, прозорість заливки, колір, а також ввести опис.

Остання кнопка, поміщена на панель інструментів, дозволяє зробити активними маркери в нижньому правому куті схеми, щоб змінювати її розмір. Крім того, до ваших послуг вибір відображення з 4 варіантів: народна, супутник, гібрид, схема- форма введення точного місця, що потребує створення схеми- інструмент для зміни масштабу.

Про картах і кодах

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

Такий код вставляється в якості виклику скрипта, це може викликати труднощі у новачків, зате відвідувачі вашого сайту зможуть вибирати варіант відображення, переміщатися по карті, змінювати масштаб. Карту можна ідеально підлаштувати під розмір вашої сторінки, помінявши відповідні цифри в кінці коду.

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

У «Вордпресс» вставити код карти можна безпосередньо, якщо вами використовується Html редактор під час написання і редагування публікацій. На сторінці редагування статті натисніть на функцію «Налаштування екрану», яка розташована у верхньому правому куті, поставте галочку в пункті «Довільні поля». Після цього, під статтею виникне однойменна область, де потрібно натиснути на пункт «Введіть нове» і вказати ідентифікатор для короткого коду (без пробілів, латиницею) в лівій частині форми. У правому ділянці потрібно вставити код, який був отриманий в конструкторі Яндекс-карт.

Далі відкрийте функціональний файл під назвою «functions.php». Додайте особливий код, попередньо створивши резервну копію сайту. Після вказаних дій в статичну сторінку або статтю можна буде додати код, отриманий від конструктора Яндекс карт.

Якщо необхідно встановити схему проїзду безпосередньо в каркасі блогу, скрипт можна вставити безпосередньо, проте потрібно вибрати використовуваний шаблон теми «Вордпресс», щоб карта видавалася в необхідному вам місці.

Особливості роботи з Joomla

Щоб в Joomla вставити Яндекс карту, передбачено кілька варіантів. Вирішити
поставлене завдання можна за допомогою компонента і плагіна «Yandexmap», особливих «Яндекс карт» для Joomla, а також рішення «Zh YandexMap». Для того щоб вставити карти Яндексу, можна використовувати модуль довільного коду Html, однак попередньо необхідно відключити традиційний візуальний редактор.

Його можна знову включити, після того як код буде вставлений. Щоб додати схему проїзду в публікацію, потрібно також вставити код при відключеному візуальному редакторі або вставити вміст з модуля, відповідального за довільний код, за допомогою плагіна під назвою «Load Module». Модуль, що включає в себе код карти Яндекса, потрібно помістити в неіснуючій позиції шаблону. Тепер ви знаєте відповідь на питання, як вставити Яндекс карту на сайт, все виявилося досить нескладно. Сподіваємося, наші поради допоможуть вам розвинути свій сайт.