Яндекс Карта с районами

Привет всем!

Карта есть практически на любом сайте и довольно часто требуется выделить маркером не только объект, но и область или несколько районов. Такое выделение областей актуально для сайтов агентств недвижимости.

Как выделить отдельные районы на карте?

Рассматриваю вариант с Яндекс Картой.

1. Заходим на страницу конструктора: https://yandex.ru/map-constructor/

Яндекс Карта Название и описание
1 – Название карты
2 – Описание карты

Для примера выбрала Сочи, потому что хотела бы там жить 🙂

Выделяю Центральный район Сочи. Не претендую на идеальную точность.

2. Выбираем инструмент «Многоугольники»

Яндекс Карта инструмент многоугольник
Инструмент многоугольнике в конструкторе

3. Последовательно отмечаем точки, обозначаем контур будущего района (белые точки).

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

4. Слева в Списке объектов появился район – укажите его описание в появившемся окошке. Здесь же, можно выбрать:

  • Цвет, прозрачность и толщину контура
  • Цвет и прозрачность заливки

Нажимаем «Готово» — район готов.

5. Далее нажимаем «Сохранить и продолжить»

Яндекс Карта сохранить

6. Затем нужно указать тип карты:

Яндекс Карта тип карты
Вид и размер карты
  • Интерактивный – в этом случае карту можно будет просматривать прямо на сайте, передвигать, менять масштаб. Такая карта используется в большинстве случаев;
  • Статический – отображается простая картинка, являющаяся ссылкой на большую карту.

7. Размер карты: ширина и высота, в пикселях.

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

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

8. Масштаб меняется с помощью ползунка окошка. Я для этой цели использую нажатие клавиши Alt + колесико мышки. В таком масштабе карта изначально будет отображаться на вашем сайте.

Яндекс Карта размер и масштаб

9. Нажимаем «Получить код карты».

Если вам нужна только ссылка на карту, тогда скопируйте её в нижнем поле.

10. Появляется окошко с двумя вариантами кода:

JavaScript или iframe

Яндекс Карта два варианта кода

Использование кода iframe имеет ограничения:

  • для карт доступен только вид Схема,
  • карта может отображаться только на крупных масштабах,
  • Некоторые теги HTML не работают на карте при вставке через iframe:
  • не показываются произвольные изображения, тег img (<img src​=»my-picture.png» />);
  • не запускаются скрипты, тег script (<script src​=»»></script>);
  • не обрабатываются инлайн-стили (style=»…») и инлайн-скрипты (onclick=»…») и т. п.

11. Скопируйте JavaScript код и вставьте в нужное место на сайте.

Ещё вариант, добавляем метку к выделенному району:

Желаю успехов! 🙂

Голосов: 3, Средняя оценка: 3.7
Top Юлия Волобой