Щоб сайт шукався на Яндекс.Картах, його потрібно зареєструвати в Яндекс.Довіднику.

Щоб розмістити фрагмент картки у себе на сайті, потрібно заповнити пару полів у конструкторі. Припускаю, що краще на HTML сторінку встановити код статичної схеми з посиланням на Яндекс.Карти, оскільки скрипт може барахлити на пристроях з повільним інтернетом.
Результат:

адреса_конструктора " alt="назва_компанії"/> !}

Режим панорами можна також додати до себе на сайт Результат (вміст можна крутити, якщо захопити його ділянку мишкою, переходити вулицями клацаючи по стрілках):

Раджу подивитись це відео для натхнення:

Додати карту на сайт: дві картинки поряд (HTML / CSS)

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

Але я вважаю так: користувач шукає організацію і йому насамперед потрібно дізнатися, як до неї дістатися. Тому краще, якщо він побачить достатнього розміру карту, ніж дрібну карту і дрібне фото будівлі, що стоїть поруч. При зменшенні екрана максимально довго залишатиметься права частина фонового зображення. А тут ліва: Якщо потрібно, щоб фотографія переміщалася на новий рядок, коли дві картинки не вміщаються разом на поточній?
І останнє, вставка карти поверх фото. Опис картинки буде або праворуч від зображення з адресою фірми, або під ним.
Скульптура «Батьківщина-мати кличе!» Скульптура «Батьківщина-мати кличе!»

(Гарна штука), сьогодні мова знову піде про сервіс від Яндекса і знову про карти, тільки не про пластикові і не про гральні, а про карти місцевості. Розглянемо конструктор карт від Яндекс, за допомогою якого можна зробити, наприклад, схему проїзду до вашого офісу та повісити її на сайт. У статті наведено докладну інструкцію з налаштування сервісу Яндекс Карти для сторінки контактів персонального сайту.

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

Навіщо потрібна інтерактивна карта

Зручно для клієнта – легко планується маршрут з урахуванням усіх актуальних змін, оскільки Яндекс оперативно вносить дані про ремонт та нові забудови на свої карти.

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

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

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

З розвитком інтернет-сервісів, таких як Яндекс Карти та Google Maps, з'явилася можливість зробити карти живими – інтерактивними. Такі можна крутити в різні боки, змінювати масштаб, маршрути з різних точок задавати, планувати своє переміщення з урахуванням пробок та багато іншого.

Наявність зручної схеми проїзду на сторінці контактів у наш час є правилом гарного тону будь-якої компанії.

І для того, щоб допомогти вам зробити свій веб ресурс більш привітним до людей, я розповім, як додати Яндекс карту на сайт, робиться це дуже легко за допомогою спеціального конструктора (не складніше ніж).

Конструктор карт Яндекс

Якщо у вас немає облікового запису в Яндексі, то треба буде його завести, тому що без цього сконструювати нічого не вийде, сервіс попросить вас залогінитися або пройти реєстрацію. Налякатися не потрібно, реєстрація – це створення поштової скриньки на Yandex. Навіть якщо він вам не потрібен для роботи з електронною поштою, стане в нагоді для інших сервісів пошукової системи, наприклад, для Яндекс Метрики або Яндекс Вебмайстер.

Починається процедура з цієї сторінки – tech.yandex.ru/maps/tools/constructor/

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

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

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

Додавання об'єктів

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

Після натискання на кнопку знайти на місцевості з'явиться точка, що відповідає розташування заданого об'єкта. Можна вставити багато об'єктів. Приклад із Кремлем:

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

Зліва наповнюється список усіх зазначених на карті адрес.

Зміна масштабу та положення

За допомогою клавіш "+" і "-", що знаходяться в лівій верхній частині макета, встановлюється оптимальний масштаб. Повна карта Росії не потрібна, щоб переміщатися центром Москви і, якщо ви вказуєте точковий об'єкт в якомусь місті, краще налаштувати масштаб на рівні, коли помітні назви вулиць і навколишніх будинків.

Для переміщення карти в різні боки необхідно захопити її натисканням лівої кнопки миші і рухати куди потрібно.

Контури об'єктів (багатокутники) та лінії

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

Крапок може бути скільки завгодно, тому фігура, зафарбована на карті, допускає будь-який ступінь складності. Завершити побудову контуру можна натисканням миші по останній встановленій точці або перемиканням на будь-яку іншу кнопку конструктора (наприклад, на лінії). Я виділив контури Московського Кремля на його стіні:

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

У такий спосіб можна показати оптимальний маршрут огляду пам'яток.

Кінцеву точку підтверджуємо її повторним натисканням мишею, там буде меню «Видалити»/«Завершити». Після вибору завершення відкривається поле для підпису до кінцевої точки та налаштування параметрів лінії (товщина, колір, прозорість).

Завершуємо маршрут натисканням на Готово.

Вид карти та накладання пробок

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

А ось перемикання режимів між схемою, супутником і гібридом може стати в нагоді.

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

Назва та опис

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

Код картки для вставки на сайт

Наша карта вже готова і тепер треба отримати її код для вставки на сайт, Яндекс дає можливість зробити:

• інтерактивну карту (про яку я говорив із самого початку);
• статичну - звичайна картинка, тільки з мудрим кодом, нічого рухати в ній не можна, на додаток ще й максимальна кількість об'єктів обмежена;
• друковану – файл-зображення високої якості, підтримуються не всі країни, переважно СНД та Туреччина, не підтримуються супутникова та гібридна версія.

Вибір між ними буде виведено одразу після збереження.

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

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

Підсумковий код з'являється після натискання на кнопку «Отримати код карти», мій виглядає так:

При виборі друкованої карти додасться вибір формату файлу - png або jpg, і коду, відповідно, не буде - кнопка завантаження замість нього з'явиться. Такий файл теж можна вставити на сайт, тільки треба буде закачувати його на хостинг і за відсутності візуального редактора у вашого сайту треба буде виписати зображення в HTML теги (src)

Як вставити картку Яндекс на сайт

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

Карта, яку я зробив

Ось що вийшло у мене після всіх налаштувань:

Зручний цей елемент всім - і потрібні об'єкти підсвічені і масштаб підібраний як належить. Крім того, сервіс Яндекса дозволяє користувачеві визначити своє місце розташування (стрілочка у верхньому лівому кутку) та прокласти індивідуальний маршрут у потрібну точку.

Розкрити карту на весь екран дозволяє кнопка в правому верхньому кутку у вигляді двох стрілок, що розходяться в різні боки. Тепер про плагіни.

Плагіни для WordPress та інших CMS

Раніше робити карти було складніше і багато хто користувався для цього спеціальними плагінами, наприклад, для WordPress був такий - Yandex Maps for WordPress. Зараз не потрібні ніякі API і будь-який користувач з мінімальними знаннями розбереться як все налаштувати, тому сенсу в плагінах я не бачу. Названий вище плагін тому підтвердження – не оновлюється понад 2 роки, мабуть попиту немає.

З відносно актуальних я знайшов Yandex Maps API (оновлений 4 місяці тому) та Oi Yandex.Maps for WordPress (5 місяців тому). Якщо у вас є бажання пограти в плагіни, їх знайдете в репозиторії Вордпрес пошуком, а як встановлювати плагіни .

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

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

Відразу дам посилання на API: http://api.yandex.ru/maps/. Якщо є навички поводження з API, то проблем з розумінням там не виникне. Також у своєму курсі я також використовував цей API для виведення карти.

У цій статті ми розберемо найпростіший приклад виведення Яндекс.Карт. Для початку напишемо відповідний HTML-код:

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

Тепер код JavaScript:

var myMap;
ymaps.ready(init); // Очікування завантаження API із сервера Яндекса
function init () (
myMap = new ymaps.Map("map", (
center: , // Координати центру карти
zoom: 10 // Zoom
});
}

Тепер при відкритті сторінки з'явиться картка. Можливостей у Яндекс.Карт дуже багато: можна ставити маркери, малювати маршрути, виводити різну інформацію (наприклад, ті ж пробки) та багато іншого. Як все це підключається написано в API .

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

Додати інтерактивну картку на свій сайт дозволяє, наприклад, всесвітньо відома пошукова система Google. Зробити це можна за допомогою безкоштовного сервісу Google Maps.

Крок 1. Отримати код для встановлення картки Google на сайті

Отже, щоб розмістити інтерактивну карту Google на своєму сайті, в першу чергу потрібно отримати код картки з відміткою Вашої організації. Для цього в GoogleMaps введіть адресу або назву компанії в рядок пошуку, або вручну знайдіть необхідний будинок на карті та встановіть мітку клацанням миші.

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

У списку меню виберіть пункт «Посилання/код».

У вікні, що відкрилося, перейдіть у вкладку «Код», виберіть розмір карти і скопіюйте запропонований html-код.

Крок 2. Як вставити код карти 2gis на сайт

Отже, код отримано, залишилося лише розмістити його на потрібній сторінці сайту. Ми вирішили додати картку до розділу «Контакти». Заходимо в адмінку "Нубекса", на панелі управління вибираємо розділ "Сторінки", знаходимо в списку потрібний розділ і натискаємо "Редагувати".

Працюватимемо з текстовим блоком. Натискаємо кнопку «Джерело», щоб перейти в режим редагування коду. Вставляємо в текстове поле код, отриманий на GoogleMaps, та зберігаємо зміни.

Заходимо на сторінку «Контакти» нашого сайту та радіємо поновленням!

Завдяки Google maps будь-який відвідувач вашого сайту зможе побачити місце розташування організації, прокласти маршрут на автомобілі, на громадському транспорті або пішки, а також зберегти вашу адресу у своїх нотатках.

Крім карт від Google, ви також можете розмістити на сайті карти від і 2gis, про них ми розповімо у відповідних статтях.

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

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

Навіщо додавати компанію до Яндекс Карти?

Яку користь отримує компанія від мітки на карті?

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

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

Можна вказати приблизну адресу, а також номер телефону, за яким вам можуть зателефонувати та дізнатися про всі необхідні деталі.

Що таке Яндекс Довідник?

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

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

Покроковий алгоритм, як додати компанію до Яндекс Карти за допомогою Яндекс Довідника

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

Переконавшись у тому, що назви вашої установи немає в базі, переходьте до процесу додавання:

Що заборонено додавати?

Також є заборони додавання певних об'єктів на карту. Відмовлено у реєстрації на Яндекс Картах буде наступним організаціям:

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

Це не повний список, але навіть цих пунктів достатньо, щоб зрозуміти, якого типу організації не пройдуть модерацію на сервісі.

Додавання фотографій компанії на Карти Яндекса

Якщо ви вирішили додати магазин до Яндекс Карти, окрім перелічених вище дій, необхідно також подбати про створення галереї фотографій. Як це зробити?

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

Користувальницькі вимоги до фотографій компаній

Завантажувати можна лише файли, що мають формат jpg, png. Більше 10 МБ файл важити не може. Не допускаються до розміщення такі фотографії:

• Дублікати;
• Водні знаки, що містять, що перекривають перегляд основного зображення;
• Що не відповідають самій організації;
• Фотографії поганої якості (розмиті, пошкоджені, зняті з екрана монітора тощо);
• Що мають у собі приховані посилання;
• Зображення заборонених товарів (зброя, наркотики та ін.);
• Фото еротичного характеру;
• Фотографії з даними про послуги або роботи, які заборонені російським законодавством;
• Колажі;
• Фото з наявністю провокаційних сцен, жорстокості, насильства, закликів до злочинів.

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

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

Управління відгуками про організацію на Яндекс Картах

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

Більшість їх залишають користувачі сервісу, частина надається сайтами-партнерами Яндекс Довідника. Кожен відгук додається на сервіс лише після успішного проходження модерації. Залишити його можна лише один раз. Далі дозволено лише редактуру. Пишеться лише російською мовою, інші не розглядаються. Не публікують такі відгуки:

• З використанням образ та ненормативної лексики;
• Що містять порівняння з конкурентами;
• Відгуки, надіслані на адресу адміністрації Яндекс.Карт, з пропозиціями щодо покращення сервісу;
• Короткі, що не мають смислового навантаження, або взагалі не належать до організації;