No Image

Яндекс карты конструктор своя метка

СОДЕРЖАНИЕ
1 просмотров
10 марта 2020

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Разметка тетради в клетку

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

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

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

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

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

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

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

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

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

Для того чтобы использовать свою метку на яндекс картах, следует подключить компоненты API Яндекс.Карт :

После этого создадим div в котором будет располагаться наша карта:

В стилях обязательно указываем размеры карты:

В js файле, подключенном к данной странице, делаем вызов карты в блоке с соответствующим id:

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

Рассмотрим, как добавить метку на картах яндекса, при этом в качестве метки мы будем выводить своё изображение. Данный скрипт построен на API 2.1 Яндекс Карт.

Создаём свою метку

Подключаем скрипт API Яндекс Карт 2.1 и выводим наш скрипт.

Добавление нескольких меток

Тут все почти аналогично, рассмотрите на примере:

Тут всё просто, пример работает на ура. Если есть вопросы, задавайте.

Читайте также:  The bureau xcom declassified концовки

Широту и долготу можно посмотреть на официальном сайте Яндекса, перейти .

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

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector