Как вставить интерактивную карту Яндекс на свой сайт

Добавлено 24.10.2013

Как добавить интерактивную карту Яндекс на свой сайт - пошаговое руководство



Для создания карты зайдите на сервис Яндекса “Конструктор карт”. Сервис не требует регистрации или авторизации в Яндексе, авторизация нужна только для того, чтобы сохранять и потом редактировать все свои карты.


Как быстро добавить карту


В поле “Найти место на карте” напишите название населённого пункта или сразу точный адрес и нажмите “Найти”.


Интерактивная карта Яндекс - выбор населённого пункта


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


Добавление метки на карту


Кликните по метке, если нужно изменить её цвет и добавить описание.


Как перекрасить метку на карте и добавить описание


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


Изменение масштаба карты


После того, как карта отредактирована, нажмите кнопку "Сохранить и получить код".


Сохранение карты Яндекс


По умолчанию появляется код для вставки интерактивной карты. Если вам нужна просто неподвижная картинка карты, нажмите на кнопку "Статическая".


Получение кода интерактивной и статической карты Яндекс


Теперь осталось только скопировать весь полученный код и вставить его в нужную часть страницы с помощью html-редактора.


Если сайт создан на нашем сервисе бесплатных сайтов - вставьте код в специальное поле на странице “Контакты”


Вставка кода карты в раздел Контакты бесплатного сайта сервиса Фреш


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


Вставка произвольного кода на бесплатный сайт - сервис Фреш


Готово! После сохранения простая интерактивная карта Яндекс добавится на ваш сайт.


Если вам нужно больше функций - ниже кратко описаны типы карт и их особенности, а также рассмотрены специальные инструменты - рисование линий и многоугольников, добавление меток с номерами и изменение размера карты.


Типы карт



  • схема - стандартная карта схема;

  • спутник - карта, составленная из фотографий со спутника;

  • гибрид - на карту со спутника наложены названия районов, улиц, номера домов и т.п.

  • народная карта - самая подробная карта-схема, которую составляют пользователи. На ней отмечаются объекты, которых нет на стандартных схемах - магазины, аптеки, новые здания и т.п.


Обычно в картах для сайта используется карта “Схема”, но в некоторых случаях лучше остановиться на другом типе карт. Вот пара советов:


1. Используйте “Гибрид” схемы города и фотографий со спутника, чтобы придать карте реалистичности и дать посетителям дополнительные ориентиры.


Гибрид схемы с фотографий со спутника


Например, эту карту можно было пояснить так: “Наш офис находится на углу улиц Ленинградской и Полины Осипенко напротив парка Авиастроителей”. Клиенту понадобились бы некоторые усилия, чтобы вспомнить где находятся эти улицы, а ориентир - парк Авиастроителей - поможет сообразить гораздо быстрее.


2. Используйте “Народную карту”, если по соседству находятся значимые и узнаваемые объекты - здания администрации, музеи, кинотеатры, торговые комплексы и т.д.


Народная карта Яндекса показывает инфраструктуру района


Эту карту можно было бы пояснить следующей фразой: “Наш автосервис находится напротив торгового комплекса “Красная площадь” сразу за заправкой “Роснефти”.


Если в этом случае вместо народной карты использовать “Схему” или “Гибрид”, то клиенту автосервиса сначала придётся разгадать, где здесь заправка и где торговый центр.


Метка на интерактивных картах Яндекса - схема и гибрид


Специальные инструменты



  • установка точек - главный инструмент, ставит на карту метку нужного цвета, добавляет к ней описание, при необходимости - указывает номер от 1 до 99 внутри метки. 


Установка точек на интерактивную карту Яндекс


Нумерация полезна, когда на одной карте, к примеру, несколько филиалов.


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



  • рисование линий - позволяет нарисовать на карте самый кривой маршрут, добавить к нему описание, настроить цвет, толщину и прозрачность линий. Особо полезен когда “вход со двора через проход между домами”.


Рисование линий на карте для сайта Яндекс



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


Рисование сложных многоугольников на карте для сайта



  • изменение размеров карты - позволяет “потянуть” карту по ширине и высоте, чтобы она идеально “вписалась” в сайт.

  • Изменение размера карты Яндекс


На этом всё. Полезных инструментов и понятных карт!


Marina Ovcharenko