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

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

Чтобы ему не искать информацию на других ресурсах, мы можем добавить карту яндекс на сайт.

Яндекс позаботился о нас и разработал технологию API Карт, это целый набор инструментов по работе с картами, так же позволяющий размещать их на сайте:

  • Конструктор карт – сервис для создания интерактивных карт, схем проезда, которые вставляются на сайт с помощью html-кода;
  • API Конструктора карт – интерфейс для интеграции с сайтом или приложением;
  • JavaScript API – набор компонентов для замещения Яндекс.Карт в веб приложениях или на сайте;
  • Платный API карт – лицензия для разработчиков закрытых систем и мониторинга транспорта;
  • Геокодер – сервис для перевода координат в адрес и наоборот;
  • Static API Карт - статичные изображения Яндекс.Карт, отдаваемые по HTTP-запросу;
  • API поиск по организациям – поиск организаций в базе Яндекс по названиям, адресам, телефонам, услугам и т.п.;
  • YmapsML – способен передать карту с пометками в текстовом формате.

Инструкция: как вставить карту Яндекса на сайт

Нас интересует «Конструктор карт», поэтому перейдите по соответствующей ссылке. Перед вами откроется интерфейс для создания Яндекс карт для сайта.

1. В окошко «найти место на карте» введите адрес вашей организации, улицы или пункта назначения, который вы бы хотели, чтобы отображался на карте. Нажмите кнопку «Найти» и из предложенного списка адресов выберите ваш.

2. Яндекс карта найдет необходимый адрес и сделает на нем метку, описание и цвет которой можно изменить, далее нажмите «Готово». Так же точку можно установить вручную, для этого выберите инструмент маркер и кликните по карте в нужном вам месте. Нажмите кнопку «Сохранить карту и получить ссылку».

3. Откроется окно редактирования карты. С помощью инструментов и инструкций вы можете выбрать тип карты, ее размер, масштаб. Когда все настройки будут выполнены сохраните предложенный HTML-код.

4. Разберем установку карты созданной в Яндекс.Картах на конструкторе сайтов Nubex. Зайдите в систему управления вашим сайтом. Мы решили вставить карту на странице сайта «Контакты», для этого зайдите в раздел «Документы сайта» -> «Контакты».

5. На панели инструментов редактирования текста нажмите кнопку «Источник».

6. Вставьте скрипт Яндекс.Карты в код сайта, нажмите кнопку «сохранить».

7. Обновите страницу сайта «Контакты», проверьте карту. Готово, вы смогли установить Яндекс.Карту на сайте.

Отдельно расскажем об уже имеющемся на наших сайтах Nubex виджете Карта яндекса. Разместить его можно в колонках сайта, в слева или справа соответственно.

1. Для этого войдите в панель управления сайтом, после чего выберите раздел «документы сайта».

2. Добавление адреса доступно в колонке №1 (левая колонка), колонке №2 (правая колонка).

3. Выбрав первую колонку, кликнем по раскрывающемуся меню.

4. Откроется список виджетов, которые вы можете установить в этой колонке. Выбираем «Создать блок: Карты яндекса».

5. Отметьте страницы сайта (главная и внутренняя), на которых вы хотите отображать контактные данные.

6. Задайте заголовок, определите опции его отображения: c фоном или без.

7. Кликните по карте, чтобы зафиксировать вашу точку нахождения.

8. Ниже можете указать ссылку с подробным описанием проезда к вашей организации, по которой пользователь перейдет, кликнув по карте. Ссылка может вести как на любую страницу вашего сайта с подробным описанием проезда, либо ссылку на Яндекс.Карты с отметкой вашей организации, где пользователь сможет проложить маршрут.

9. Не забудьте сохранить и обновить страницу.

Теперь посетитель сайта сможет визуально понять ваше месторасположение и по схеме проезда добраться до вас без каких-либо трудностей. Кроме Яндекс карт, вы так же можете разместить на сайте карты от Google Maps и 2gis, о них мы расскажем в соответствующих статьях.