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

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

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

Выберите один из следующих типов карт:

  • Яндекс Карты
  • Google Карты
  • Google Embed Карты

При выборе Яндекс Карт и Google Карт для подключения вам потребуется получить API ключ и указать его в настройках виджета. Инструкцию по получению API ключа можно найти в отдельной статье для Google и для Яндекса.

При выборе Google Embed Карт вам не потребуется получение API ключа. Но для Google Embed Карт вы сможете установить только одну метку без дополнительных настроек.

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

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

Вы можете добавить на карту до 50 меток при выборе Яндекс Карт и Google Карт.

Также с помощью настроек карты вы можете включить или отключить следующие параметры:

  • Выбор типа карты
  • Ползунок масштабирования
  • Фиксация карты

Для Google Карт есть возможность выбрать дизайн отображаемой карты.

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

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

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

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

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

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

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

Читайте также:  Как посмотреть все свои видео на ютуб

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Принтер кэнон 2411 отзывы

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

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

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

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

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

Ссылка на основную публикацию
Adblock detector