Создать метку на карте

Создать метку на карте

Продолжаем изучать особенности API Яндекс.Карт версии 2.х начатый в предидущей заметке «Начинаем изучать API Яндекс.Карт 2.0».

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

Рассмотрим простейший пример добавления метки.

Пример добавления метки на карту — JavaScript API Яндекс.Карт 2.0

Использование интерактивных карт на веб-страницах — это отличный и удобный способ показать клиенту, где именно располагается ваша организация. При использовании "Яндекса" можно не только расположить модуль с картой, но и поставить по нужному адресу метку, которая поможет посетителям легко сориентироваться при поиске.

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

Самый простой способ того, как поставить метку на карте "Яндекс" — это воспользоваться конструктором карт, который можно найти на официальном сайте "Яндекса". Для того чтобы выложить на сайт карту с заданной отметкой, достаточно выполнить ряд несложных действий. Интерфейс интуитивно понятен для любого пользователя.

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

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

Настройка метки

Чтобы было понятнее, как поставить метку организации на карте "Яндекс", разберем этот процесс по пунктам:

  • В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.

  • Сверху нажмите на кнопку "Метки" и левой кнопкой мыши выберете необходимое место карты.
  • Появится значок, который будет отмечать нужное место, а в левой части окна вы увидите список добавленных объектов. Конструктор дает возможность не только разобраться, как поставить метку на карте "Яндекс", но и поможет ее отредактировать по своему вкусу.
Читайте также:  Как красиво подписать под фото

  • При выборе места, в меню слева откроется интерактивное диалоговое окно, в котором можно вписать данные об организации, выбрать цвет и тип иконки, а также пиктограмму, указывающую на направленность работы организации.
  • Нажав кнопку "Готово", вы сформируете метку на карте.

Чтобы понять, как поставить несколько меток на карте "Яндекс", просто нажмите еще раз на другой нужный адрес левой кнопкой мыши при выбранном пункте "Метки" сверху, и вы увидите, что другая метка также появилась. Ее можно редактировать аналогичным образом. Если метку требуется удалить, нужно выбрать ее в меню слева и нажать на соответствующую кнопку в диалоговом окне.

Как только редактирование завершено, нажмите "Сохранить и продолжить". В открывшемся окне можно задать необходимый размер для карты — его вы можете выбрать, исходя из требований сайта, на котором он будет расположен. Рекомендуется располагать метку в центре карты, а масштаб сделать такой, чтобы были видны названия близлежащих улиц. Так информация воспринимается гораздо лучше.

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

Получение кода для размещения

После того как вы смогли поставить метку на карте "Яндекс", можно приступать к размещению последней на сайте:

  1. Для этого необходимо получить код. Нажмите на соответствующую кнопку слева, откроется диалоговое окно.
  2. Данный код вставляется в нужное место на вашем сайте, и после обновления страницы интерактивная карта с расположенной на ней меткой, которая указывает на вашу организацию, начнет работать.

Обратите внимание, что в этом же окне можно выбрать вариант для распечатки карты на бумажном носителе, получить на нее активную ссылку, а также задать размер: фиксированный на ширину экрана. Если вы выбрали вариант для распечатывания, можно задать соответствующие параметры — формат, качество и размер. Сохранить файл рекомендуется на компьютере или на сервисе "Яндекс.Диск".

Читайте также:  Wi fi protected access

Вы можете в любой момент вернуться к редактированию полученной метки, нажав на кнопку в левом верхнем углу. Метки можно добавлять в любом количестве, перемещать, удалять и менять их оформление.

В заключение

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

Используя сервис «Яндекс.Карты» Вы можете создать интерактивную карту для своего сайта и установить на ней множество меток с индивидуальной информацией в каждой метке.

Видео: установка меток на Яндекс.Карте

Для работы с конструктором карт от Яндекс у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки.

Создание новой карты

Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор карт по адресу:
https://tech.yandex.ru/maps/tools/constructor/

Во всплывающем окне, вам будет предложено создание новой карты. Нажмите — «Создать карту».

Далее, в строке поиска, введите адрес местоположения вашей компании, и нажмите кнопку — «Найти».

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

  • измените масштаб карты
  • в форме описания, добавьте название, адрес и контактную информацию компании
  • измените цвет и тип маркера при необходимости

После внесения изменений, нажмите кнопку «Готово»

Установка нескольких меток на карте

После внесения информации в описание, при необходимости, вы можете установить несколько маркеров на интерактивной карте. Для этого, перейдите во вкладку «Метки», и приступайте к установке маркеров в необходимых областях карты, путём нажатия левой клавиши мыши.

Читайте также:  Javascript запуск после загрузки страницы

Примечание: в каждой метке можно указать описание, цвет и тип для их различия.

По завершению всех меток, нажмите «Сохранить и продолжить».

Настройка размера карты

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

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

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

Размещение карты на странице сайта

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

Для этого, нажмите на кнопку «Получить код карты».

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

Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.

Во всплывающем окне, необходимо разместить код интерактивной карты.

Вставьте код карты в конец содержимого (место размещения карты указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».

После проделанных действий, нажмите кнопку «Сохранить», и проверьте вывод карты на сайте.

Ссылка на основную публикацию
Смарт часы фикситайм 3 отзывы
Данный товар недоступен для доставки в Ваш регион Мы всегда стремимся к лучшему, чтобы радовать своих покупателей самыми выгодными ценами....
Сколько метров полоса разгона
Добрый день, уважаемый читатель. В этой статье речь пойдет про дополнительные полосы, предназначенные для разгона и торможения транспортных средств. Такие...
Сколько микрофонов в телефоне
Автор : Семён Романов Время чтения: 2 минуты Содержание Типы микрофонов Расположение в устройстве Возможности гарнитуры Как происходит подавление шумов...
Смарт часы эпл для детей
1 min Apple Watch — самые популярные умные часы в мире. Является ли это идеальным выбором для вашего ребенка, зависит...
Adblock detector