Як зробити карту доставки c зонами на сайті

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

Карта ідеально підійде для сторінки «Контакти» або «Інформація про доставку». Даний варіант реалізуємо для будь-якого сайту і займе трохи часу для створення карти доставки.

2. Для прикладу, візьмемо: Центральний офіс і два магазини, розташованих в центрі Москви.

За допомогою інструменту «Установка точок» розкидаємо наші об'єкти. Просто вибираємо місце, у вікні можна підписати назву, вибрати колір і поставити номер об'єкта.

3. А тепер позначимо територію доставки. Припустимо у нас дві зони: безкоштовна і платна. Для цього нам знадобитися інструмент «Малювання багатокутників».

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

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

Встановлюємо карту доставки на сайт

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

В кінці даємо назву нашій карті і натискаємо «Зберегти і отримати код».

У підсумку отримуємо готовий код, який вставляємо на потрібну сторінку.

Що б підігнати розмір карти під себе, змінюємо:

Ось готова карта, яку ми тільки що зробили. Всім дякую.