Содержание
Навигация по статье
Что такое «Яндекс Карта»
- Что такое «Яндекс Карта»
- Зачем она нужна на сайте
- Как создать ее в конструкторе: пошаговая инструкция
- Как добавить на сайт
- Коротко о главном
Что такое «Яндекс Карты»
«Яндекс Карты» — многофункциональный онлайн-сервис, который помогает пользователям сориентироваться на месте нахождения, найти ближайший интересующий объект или построить маршрут любого вида передвижения до нужного адреса. Миллионы людей каждый день пользуются поиском по карте «Яндекса» и каждому пользователю сервис выдает одно или несколько решений исходя из заданного поискового запроса.
Учитывая популярность картографического сервиса, рекомендуем каждому владельцу бизнеса завести карточку организации в «Яндекс Картах». Сделать это можно с помощью «Яндекс.Бизнеса»: заполнить профиль контактными данными, указать ссылку на сайт, и получать бесплатный целевой трафик из поиска.
Потенциальные клиенты будут видеть вашу организацию и понимать, что вы рядом и у вас есть нужный продукт или услуга. Напоминаем, поисковая система выдает пользователю ближайшие адреса, подходящие под его запрос.
Заполненную карточку сервиса можно интегрировать на ресурс с помощью кода вставки: все данные подтянутся из карточки.
Также можно создать отдельную карту в Конструкторе карт и указать на ней необходимую информацию. Инструкцию, как сделать карту в конструкторе, мы рассмотрим далее.
Зачем нужна карта «Яндекса» на сайте
Карта «Яндекса» на сайте — необходимый компонент коммерческого ранжирования для поисковой системы, которая любит подробную информацию об организациях и может выдавать их сайты выше конкурентов в поиске.
Если на вашем сайте в разделе «Контакты» есть виртуальное изображение, на котором указаны адрес и время работы — это улучшает юзабилити. Пользователь сразу видит и необходимую информацию для связи и место, где вы находитесь.
Для большего эффекта вовлечения рекомендуем установить интерактивную карту, на которой можно создать схему проезда. Клиент сможет рассчитать, сколько времени ему нужно, чтобы добраться до вашего магазина или офиса и не ошибиться с адресом, если едет к вам впервые.
Другой вариант пользы интерактивной карты — возможность добавить много адресов вашей организации, где вы продаете товары или предоставляете услуги. У клиентов наличие торговой или обслуживающей сети у организации вызывает повышенный интерес, так как можно выбрать адрес по предпочтению, не обязательно самый близкий по местоположению.
Как создать карту «Яндекса» в конструкторе: пошаговая инструкция
Для создания карты, которую вы потом встроите на сайт зайдите в сервис «Конструктор карт Яндекса» через свой аккаунт или зарегистрируйтесь.
Если у вас уже есть карта в сервисах «Яндекса», вы увидите ее в списке и сможете отредактировать перед добавлением на сайт. Но мы будем создавать с нуля, поэтому выбирайте функцию «Создать карту»:
Если вы впервые в сервисе, увидите вот такое приглашение создать собственный картографический инструмент с метками, схемами проезда и т.д.:
Жмите на кнопку и начнем работу. После перехода в рабочее пространство Конструктора вы увидите большой функционал сервиса, который можно быстро освоить.
Как сделать метку, линию и т.д. на карте?
Основными рабочими инструментами у нас будут метки и линии, дополнительными — все остальные, которые используются для уточнений навигации.
Метки — это обозначения статичных объектов. Обычно маршрут строится между двумя объектами, которые и обозначаются метками. В их описании можно указать любую дополнительную информацию: телефон, часы работы и т.д.
Линии — соединительный инструмент между двумя или несколькими объектами (метками) на карте. Если маршрутов несколько, можно использовать разный дизайн линий, чтобы наглядно показать варианты передвижения.
Как нарисовать схему проезда (прохода) до объекта
Для начала дадим название новой карте и заполним краткое описание ее назначения. Когда у вас будет много карт, вы сможете по названию быстро найти нужную.
Увеличиваем масштаб так, чтобы был виден объект, от которого будем строить маршрут и начинаем работу. В качестве примера построим схему прохода от ж/д вокзала до цветочного магазина и пункт отправления клиента создаем от первой метки «ж/д вокзал».
Для установки метки кликаем левой кнопкой мыши по объекту и выбираем вид, цвет и иконку для метки ж/д вокзала. После выбора подходящего дизайна метки кликаем на кнопку «Готово». У нас появился первый объект.
Следующий этап — проложение маршрута. Используем инструмент «Линии», с помощью которого показываем точное продвижение клиента до цветочного магазина. Дизайн линий тоже можно выбрать на свое усмотрение. Доступны выбор цвета, толщина линий и прозрачность.
Обратите внимание, что после установки линии передвижения появляется точное расстояние между объектами.
Сохраняем линию маршрута и переходим к последнему шагу.
Конечный этап в построении маршрута — метка цветочного магазина. Тоже можно поиграть с дизайном и выбрать интересный.
В качестве дополнительного ориентира можно использовать выделение здания с помощью инструмента многоугольники. Особенно актуальна такая подсказка, когда ваш объект находится в плотно застроенном месте.
Смотрим нашу работу, если нас все устраивает, жмем на кнопку «Сохранить и продолжить»
После сохранения карты у вас появится два варианта ее использования: интерактивный и статический. Интерактивный выбираем для встраивания на сайт. Такой вариант можно двигать и увеличивать для детального обзора. Статический используют для печати, либо для пользователей с очень медленным интернетом, при котором интерактивный вариант может не отображаться.
В любом случае, после сохранения, карта будет доступна для редактирования и вы сможете к ней вернуться в любое время.
Получаем код для вставки на сайт:
Как добавить дополнительные адреса
Интерактивная карта с несколькими адресами — самый популярный вариант использования для сайтов. Больше адресов, куда может обратиться клиент, выше процент конверсии.
Начинаем также, создаем новую карту и добавляем с помощью меток несколько адресов. Для каждого адреса можно создать свой дизайн метки и добавить информацию для клиента. Например, часы работы, телефоны, формы обслуживания. При клике на метку клиент увидит подробности.
Проверяем заполнение и сохраняем.
Помним, что созданные нами карты в любой момент можно открыть, редактировать и копировать код вставки.
#BLOG ARTICLE_5074#
Как добавить карту на сайт
Рассмотрим варианты установки на CMS WordPress и на конструктор Tilda.
Установка через виджет HTML
Заходим в панель администратора в «Вордпресс», выбираем «Внешний вид» и переходим в «Виджеты».
В виджетах выбираем HTML-код и перетягиваем его в колонку футера. Открываем содержимое виджета HTML-код и вставляем наш код.
Установка через код
В админ панели выбираем Внешний вид, переходим в Редактор тем, переходим в подвал (футер).
Устанавливаем код нашей карты в код сайта перед закрывающим тегом <body>.
Этот вариант можно использовать тем, кто знаком с версткой.
#BLOG ARTICLE_5063#
Установка на Tilda
В разделе «Все блоки» выбираем раздел «Другое» и первый же блок Т123 HTML код нам подойдет.
Устанавливаем блок в нужном месте лендинга и добавляем в контент блока скопированный код . Чтобы увидеть карту, нужно опубликовать страницу. В итоге получаем нужный результат.
Мы закончили работу: искомая карта установлена на сайт и готова к работе.
Присоединяйтесь к нашему Telegram-каналу!
Коротко о главном
- «Яндекс Карты» — картографический сервис для поиска объектов и информации, который помогает сблизить владельцев бизнеса и клиентов всеми возможными способами в одном месте.
- «Конструктор карт Яндекса» позволяет создавать карты и вставлять их на сайт.
- Интерактивная карта позволяет указать несколько адресов организации, куда может обратиться клиент и проложить маршрут до нужного магазина, ателье, салона красоты.
- Установка «Яндекс карты» на сайт простая. Для CMS и конструкторов лендингов существуют проверенные способы через виджет и код.
Продвинем ваш сайт в ТОП 10 «Яндекса»
Конструктор карт Яндекс Карты — это бесплатный визуальный редактор, в котором вы можете самостоятельно сделать интерактивную карту. Он помогает создавать мультимедийные элементы для ваших лонгридов и спецпроектов: например, показать перемещения героя материала, закрытые больницы или замороженные стройки в вашем городе, территорию реконструируемого парка, маршрут марафона. Сфера применения интерактивных карт ограничена только вашей фантазией.
В отличие от других сервисов с использованием API Яндекс. Карт (интерфейса программирования — прим.ред.), в Конструкторе нет страшных слов вроде JavaScript или MapKit: весь процесс кодинга надежно спрятан от глаз пользователя. Всё, что требуется — нажимать на симпатичные кнопки с понятными названиями «Готово», «Удалить».
С чего начать
Чтобы создать интерактивную карту, нужно зайти на сайт сервиса и кликнуть на надпись «Создать карту»:
Карта создана, теперь нужно нанести на нее объекты. В сервисе их три вида: метка, линия и многоугольник. Рассмотрим каждый из них подробнее.
Как добавить метку на карту
Метка — это точка с месторасположением, которая указывает на определенный город, район или дом или другой объект. Чтобы добавить метку, вводим в поисковую строку адрес — например, город, который вас интересует, точный адрес объекта или его координаты. Затем нажимаем «Enter» на клавиатуре или кликаем на кнопку «Найти». Конструктор автоматически добавит метку с месторасположением в список объектов.
В появившемся окне можно персонализировать метку: изменить ее тип и цвет, дать ей название. После этого нажимаем «Готово» — на карте появится наша метка:
Щелкнув на метку еще раз, можно снова вернуться в контекстное меню и изменить параметры точки. Также можно перетаскивать объект в любую сторону с помощью мыши.
Как построить маршрут
Для построения траектории будем использовать инструмент «Линии». Сначала необходимо создать, как минимум, еще одну метку. Например, мы можем построить маршрут между Москвой и деревней Петушки. Для этого повторяем для нового объекта первый шаг: вводим название деревни — «Петушки» — и добавляем ее в список. Также можно просто кликнуть в нужное место на карте.
Теперь кликаем на инструмент «Линии». Чтобы ускорить процесс, воспользуемся комбинацией клавиш Alt+L:
Нам нужно провести маршрут из одной точки в другую. Для этого нажимаем на одну из меток. Появится пунктирная линия:
Теперь кликаем по второй метке — линия станет сплошной. Кликаем по появившемуся узлу на конце линии, затем на кнопку «Завершить»:
Заполняем описание в появившемся окне и изменяем толщину линии, ее цвет и прозрачность, если нужно. Нажимаем «Готово».
Как добавить на карту водоем, дом или другой объект
Третий вид объектов, которые можно наносить на интерактивную карту, — многоугольники. С их помощью можно обозначать какие-либо зоны, рисовать на карте пруды и озера, дома, коттеджи и прочие объекты.
Нажимаем на кнопку «Многоугольники». С помощью кликов наносим на карту несколько точек. Затем нажимаем на одну из точек и кликаем по кнопке «Завершить» — мы уже выполняли похожее действие для построения маршрута.
Например, так на карте будет выглядеть водоем в деревне Петушки:
Можно менять цвет и прозрачность фигуры, изменять ее форму и перемещать ее в любую сторону с помощью мыши. В Конструкторе есть ограничения для многоугольников: нельзя задавать более 1000 вершин (узлов) для одного объекта.
Как опубликовать карту
Встроить карту на сайт можно с помощью кода iframe. Закончив редактирование карты, нужно дать ей название. Впрочем, дать ей имя можно на любом этапе до публикации.
Затем нажимаем «Сохранить и продолжить». В появившемся окне нужно выбрать область отображения карты — та часть, которая будет отображаться на сайте. Обратите внимание на то, чтобы в нее поместились все необходимые элементы. Чтобы увеличить или уменьшить область отображения, перемещайте мышкой узлы (маленькие белые квадраты).
По умолчанию в Конструкторе указан интерактивный тип карты. Вы можете выбрать и ее статичный вариант в виде картинки, но тогда пользователи не смогут взаимодействовать с элементами карты, например, кликать на объекты и читать их описание.
Нажимаем «Получить код карты» и выбираем «iframe» в появившемся окне:
Последний шаг! Копируем код и вставляем его на сайт. Если в дальнейшем нужно что-то изменить, не обязательно делать новую карту, просто вносите необходимые изменения в первоначальную карту и встроенная на сайт карта будет обновляться автоматически.
Яндекс.Карты – это картографический сервис, который можно использовать с целью поиска конкретных объектов и для получения информации о них. Любой владелец организации может зарегистрироваться в Яндекс.Справочнике и указать на Яндекс.Карте место расположения своей компании или офиса. Конструктор карт Яндекс — сервис с помощью которого можно сделать схему проезда или список магазинов для встраивания на свой сайт.
На Яндекс.Картах любой ваш клиент может затем найти вашу организацию и проложить маршрут к ней со своего текущего местоположения.
При поиске в Яндексе или непосредственно на Картах пользователю показываются ближайшие к нему компании по его запросу. Это помогает привлечь клиентов, которые находятся рядом с вами.
Это наш, русский аналог Google Карт, который в некоторых случаях удобнее западного сервиса. В первую очередь, если речь идет об отечественных компаниях: Яндекс. Карты быстрее обновляют актуальную информацию для России.
Зачем нужна карта Яндекс на сайте
Ранее мы уже писали о коммерческих факторах ранжирования сайтов в поиске Яндекса. Один из них – это полный адрес, в том числе карта (желательно интерактивная) на странице с контактами.
Но это только одна из причин, почему вам необходима карта на веб-ресурсе.
Она нужна и для других целей:
- Чтобы показать клиенту, где вы находитесь, в каком районе города. Многим как раз проще ориентироваться по карте, а не по адресу.
- С помощью карты клиент сможет проложить схему проезда или маршрут, как добраться со своего текущего местоположения к вам в магазин, кафе или офис. При этом, если на сайте интерактивная карта, ему не нужно будет покидать ваш сайт.
- Если у вас несколько точек продаж или офисов, на карте вы сможете указать их все. Клиент выберет, куда ему добираться ближе, удобнее и быстрее.
Не обойтись без карты тем компаниям, которые через сайт только рассказывают о своем предложении, а завершение сделки проходит оффлайн. Это мастерские, магазины, салоны красоты, производства разного направления, аптеки и больницы. Разберёмся, как в конструкторе карт Яндекса сделать схему проезда или список адресов для установки на сайт.
Статья в тему: Как добавить сайт в Гугл Мой Бизнес
Как создать карту Яндекс в конструкторе
Чтобы встроить карту Яндекса, нужно:
- Создать карту в конструкторе;
- Получить код карты;
- Вставить код на сайт (он подходит для сайтов на любой CMS).
Для создания карт есть специальный сервис – Конструктор карт Яндекс.
Если у вас есть почта на Яндексе, вы можете перейти на сервис и сразу приступать к созданию карты. Нажмите кнопку «Создать карту».
У вас откроется рабочее поле, на котором можно создавать свою карту. Все созданные вами карты будут сохраняться в списке карт.
Давайте попробуем создать карту. Рассмотрим пример: ваш офис находится в 10 минутах ходьбы от метро. Вы хотите указать на карте маршрут от метро до своего офиса.
Первым делом называем и задаем описание своей карты (не обязательно; но так будет удобнее, особенно если карт будет несколько).
Затем приступаете к редактированию карты. На карте вы можете:
- Ставить метки;
- Рисовать линии и многоугольники;
- Указать информацию о пробках (подтягивается автоматически, об этом позаботится сам Яндекс);
- Создавать слои.
Как нарисовать схему проезда на Яндекс.Картах
Вернемся к примеру. Нам нужно указать путь от станции метро до нашего офиса. Находим нужную станцию на карте, затем выбираем инструмент «Линии» и просто рисуем путь мышкой. Затем мы можем настроить внешний вид линии: толщину, прозрачность, цвет. Как видите, конструктор сразу подсчитал, сколько метров нужно пройти.
Затем предлагаю поставить еще и метку, указывающую на офис. Выбираем инструмент «Метки», и ставим метку, просто кликнув мышкой в нужном месте. Затем настраиваем метку: пишем описание, выбираем цвет и тип.
Нажимаем «Сохранить и продолжить».
Дальше указываем тип карты:
- Интерактивная – можно увеличить, уменьшить, полноценно взаимодействовать с картой;
- Статичная – будет на сайте в виде простой картинки. Подойдет в том случае, если вы знаете, что у вашей ЦА в основном медленное соединение.
Лучше, конечно же, использовать интерактивную карту.
Яндекс.Карта с несколькими адресами
Давайте попробуем создать карту для того случая, если у вас два магазина или два офиса в одном районе.
Точно так же создаем новую карту, называем и пишем описание. Затем выбираем инструмент «Метки». Ставим метку в нужном месте и настраиваем.
Это будет указание на первый офис (магазин, салон, филиал). Теперь нужно указать еще и второй. Все делаем точно так же, только я выбираю другой цвет для этой метки – чтобы различать. Пусть будет зеленая.
Все, карта готова. Можно сохранять и вставлять на сайт. Даже если вы не можете по какой-то причине это сделать сейчас, вы всегда найдете готовые карты в списке карт:
Это интересно: Зачем нужны Яндекс.Коллекции
Как добавить карту на сайт или на страницу контакты
Как я уже писала выше, после создания карты нужно скопировать код и встроить его на сайт.
После того, как создали карту, нажимаем «Получить код карты». Вы увидите кусочек кода, который нужно встроить в сайт.
Обычно карту на сайте размещают:
- На странице «Контакты»;
- В подвале (футере) сайта;
- Реже – на главной странице или странице «Доставка и оплата» (в основном, если речь идет о самовывозе).
Имея готовый код карты, вставить ее на сайт просто. Я подскажу вам несколько способов, в первую очередь для владельцев сайта на WordPress. Настройки вы сможете произвести даже самостоятельно.
Как вставить карту на сайт на WordPress
Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты». У нас на этой странице уже написан наш адрес, телефон, а внизу под всем контентом будет размещаться карта.
Заходим в административную панель сайта. Переходим в раздел «Страницы»:
Затем находим там нашу страницу «Контакты» и выбираем «Изменить». Переключаем редактор из режима «Визуальный» в «Текст». В конструкторе карт выбираем код iframe и копируем его:
В самом низу, после текста, вставляем этот код и обновляем страницу.
Вот теперь наша карта на сайте:
Отредактировать ширину и высоту можно прямо в коде, который дал Яндекс (теги width, height – задаем нужное числовое значение в кавычках).
Еще один вариант размещения карты, который часто используется на лендингах — вставить карту в футер (подвал) сайта. Для этого нужно будет отредактировать HTML-код страницы, вставив туда предложенный конструктором код.
На WordPress отредактировать футер можно через админпанель. Зайдите Внешний вид – Редактор – Подвал:
Чтобы отредактировать файл, нужно иметь хотя бы базовые знания HTML. Если с этим у вас все не так хорошо, лучше доверьте работу веб-разработчику (найти умельца можно даже на фрилансе).
Это интересно: Виджеты обратного звонка для сайта
Плагины Яндекс.Карт
Для разных CMS можно использовать официальные плагины карт, или модули, которые позволяют провести быструю интеграцию.
Например:
- Для 1С Битрикс: «Ваша сеть офисов на карте» и «Яндекс.Карта объектов инфоблока»;
- Для Drupal: «Geofield Yandex Maps»;
- Для WordPress: «Yandex Maps API»;
- Для Joomla!: «Яндекс.Карты для Joomla» и другие.
Полный список плагинов вы можете посмотреть в Справке Яндекса.
Как видите, сделать и встроить карту Яндекс на сайт не так и сложно, и с базовым знанием HTML это вполне можно сделать самостоятельно.
Позаботьтесь о своих клиентах и помогите им быстрее найти ваш магазин, ресторан, салон красоты или офис. Создайте карту и разместите ее у себя на сайте.
⭐ Тестим нейросети каждый день, а то, что реально работает — сливаем в Telegram-канал: «Промты — и точка».
⭐ Тестим нейросети каждый день, а то, что реально работает — сливаем в Telegram-канал: «Промты — и точка».
Содержание
- Создание карты и инструменты
- Метки
- Линии
- Многоугольник
- Пробки и слои
- Получение кода и размещение на сайте
- Интерактивная карта схемы проезда
- Код схемы проезда
- Интерактивная карта зон доставки
- Код зон доставки
Сегодня разберемся в вопросе как быстро создать схему проезда на сайт, при помощи онлайн конструктора Яндекс Карт. Разные компании по-разному подходят к решению этого вопроса, кто-то размещает нарисованную дизайнером карту, а кто-то интерактивную, когда можно не только посмотреть маршрут, но и изменить масштаб, подвигать карту или даже посмотреть подсказки. Уверен, вы неоднократно видели такие карты в разделе контактов. Частенько на подобную карту интернет-магазины добавляют пункты выдачи заказов, если их немного.
Конструктор карт – это часть API Яндекс Карт, только для этого не нужно разбираться в программировании. Все очень просто и наглядно можно реализовать, через понятный визуальный редактор. К тому же он полностью бесплатен. Конечно, у API возможностей по больше, но как показывает практика, большинству начинающих предпринимателей это не нужно.
Создание карты и инструменты
Прежде чем приступать, должен предупредить, что для этого вам понадобится аккаунт на Яндексе, так как все карты будут привязываться к нему. Советую завести отдельный аккаунт для бизнеса, если вы не единственный его собственник.
После того, как вы войдете в свой аккаунт, потребуется создать саму карту, на которой и будет указан адрес с названием вашей компании. Для этого необходимо перейти на сам конструктор Яндекс.Карт и нажать «Создать карту».
После чего вы увидите основной интерфейс, с помощью которого и будете ее создавать. Слева необходимо ввести название вашей карты, например, «Схема проезда к моему магазину». Оно будет служить идентификатором для вас, так как карт можно создать огромное количество. Чуть ниже можно задать краткое описание, чтобы различать карты в случае, если их будет много. Название и описание будете видеть только вы.
Основные инструменты работы с конструктором, находятся в левом верхнем углу карты – это метки, линии, многоугольники, пробки и слои. Слева от карты, под описанием, будет виден список объектов, которые вы будете добавлять и редактировать. Давайте вместе создадим пару примеров, для наглядности.
Метки
С помощью поиска по адресу или в ручном режиме, двигая карту и увеличивая масштаб, находим адрес. Допустим, наша компания находится по адресу «Азовская улица 24к2». Для этого нажимаем на кнопку «Метки» в инструментах и устанавливаем метку на карте. Тут можно выбрать цвет метки, тип, номер или иконку.
Если необходимо, задаем короткое название метки, оно будет отображаться рядом. Помимо этого, у нас есть большое поле, куда можем написать произвольный текс о компании, который будет отображаться при клике на метку. Это описание поддерживает HTML теги, т.е. возможно сделать текст жирным, другого цвета или вообще вставить фотографию магазина. Я указал название компании, краткое описание, время работы и адрес.
Уменьшим чуть масштаб и добавим по аналогии еще меток. Метро и пару ориентиров – «Универсам 24» и «Спортплощадку», чтобы человеку было легче искать компанию. Сделаем метки круглыми, также с иконками, цветами отличными от основной точки. Добавим короткие описания.
Линии
Далее укажем маршрут от метро. Для этого понадобится инструмент «Линии». При прокладке линий нам доступен цвет, прозрачность и толщина этих линий. А также уже встречающееся в метках описание. В нем можно указать свой комментарий или указать номера автобусов, на которых можно добраться. Я указал время ходьбы от метро.
Можно также указать автомобильный маршрут, если рядом находится какая-то сложная развязка. Я этого делать не буду, так как для городского примера это особо не требуется.
Многоугольник
А вот для автомобилистов, с помощью инструмента «многоугольник», давайте обозначим ближайшую парковку. В данном случае она перпендикулярная вдоль дороги, как раз напротив дома, где находится наша компания. Для этого, при помощи этого инструмента, надо указать крайние точки, по которым построится многоугольник.
Тут доступны для редактирования: цвет контура и его толщина, цвет заливки, прозрачность в процентах и описание. Для наглядности я еще добавлю метку сверху, со знаком «P», которая будет обозначать парковку и уже к ней сделаю описание.
Для магазинов, у которых стоимость доставки отличается в зависимости от района города, этот инструмент будет тоже полезен. Так как им можно поделить город на зоны, и указать в описании стоимость доставки для каждой.
Сделаем это вторым примером. Я разбил Москву на три зоны – «МКАД», «ТТК» и «Садовое кольцо». В описании указал стоимость равную 390, 290 и 190 рублей. Подобную карту обычно размещают в разделе «Доставка». Клиент, кликнув по определенной зоне, сможет увидеть стоимость доставки для того или иного района города. Это очень наглядно и не нужно много текста писать, где заканчивается одна зона и начинается другая.
Пробки и слои
В конструкторе имеется возможность задать какой слой карты показывать – «Схема», «Спутник», или «Гибрид», обычно используется классическая «Схема». По желанию укажите отображать ли пробки на карте. Слои и пробки, клиент сам сможет поменять на интерактивной карте. Поэтому тут вы указываете в каком состоянии будет карта «по умолчанию».
Получение кода и размещение на сайте
Остается только нажать «Сохранить карту и получить ссылку», слева от карты, и конструктор предложит в каком виде ее нужно сохранить – «Интерактивная карта» и «Статическая карта». Также карту можно распечатать. Далее попросит задать размер в пикселях по ширине и высоте. Есть возможность указать 100% ширину, чтобы карта растягивалась автоматически, в зависимости от размера окна браузера.
Выбираем интерактивную карту, после выбора параметров, и нажимаем на кнопку «Получить код карты». Конструктор предлагает код для вставки на сайт. Либо в формате javascript-кода, либо в виде вставки через iframe. Если в вашей CMS-системе есть возможность вставки произвольного html, то лучше выбрать javascript.
«Статическая карта» понадобится, если мы захотим вставить карту в виде картинки на сайт. Эта картинка будет меняться автоматически без правок на сайте. Если на свою карту вы будете добавлять новые метки или линии, то они появятся и на статической карте. Правда метки не будут иметь подсказок и иконок, а будут выводится в стандартном виде.
Если выберем «Распечатать», то конструктор предложит сохранить картинку в высоком разрешении, в формате PNG или JPG. После чего, изображение можно сохранить на компьютер или на яндекс диск. И уже оттуда распечатать на принтере. Можно это же изображение вставить на сайт, если вдруг статическая и интерактивная карты не подходят по каким-то причинам.
В итоге получаем такие вот варианты. Привожу ниже коды примеров, и то, как они выглядит на сайте.
Интерактивная карта схемы проезда
Код схемы проезда
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A78d1735799af7e9d3daba3b2508fd9c53094d60f7849f3b9729757b9775b7e94&width=100%25&height=600&lang=ru_RU&scroll=false"></script>Интерактивная карта зон доставки
Код зон доставки
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3AWhKRaMEskSxSVnxZ44WxG0NbP6ChZLpe&width=100%25&height=600&lang=ru_RU&scroll=false"></script>Можете менять масштаб, двигать карту, кликать на линию или метку. Вам будут показываться подсказки, которые добавлены в поля «описание». Единственное, я заменил в коде переменную «scroll» со значения «true», на «false». Это не даст пользователю скролить карту колесиком мышки. Бывает полезно, когда карта растягивается на всю ширину где-нибудь на лендинге.
Как вы можете убедиться, пользоваться конструктором карт от яндекса достаточно просто. Задавайте вопросы в комментариях, если таковые остались.
Шаг 1
Зайдите в конструктор карт Яндекс — https://yandex.ru/map-constructor/
Нажмите Создать карту.
Шаг 2
Укажите нужный адрес в поиске или вручную поставьте метку, где вам нужно.
Вы можете изменить внешний вид метки — Цвет, Тип и добавить Иконку.
Также вы можете добавить текст к иконке и изменить текст в адресе. После того как вы оформите метку — нажмите Готово, чтобы она закрепилась на карте.
Шаг 3
Вы можете добавить несколько меток на карту. Для этого просто введите еще один адрес и оформите новую метку так же, как мы описывали выше.
Шаг 4
После того как вы добавите все метки, нажмите «Сохранить и продолжить» слева снизу карты. После этого выберите размеры карты. Вы можете растянуть ее по ширине — для этого нажмите галочку «Растянуть по ширине».
Далее нажмите «Получить код карты», перейдите в раздел iframe — и скопируйте весь код.
Шаг 5
Зайдите в конструктор Creatium, добавьте блок с картой. Нажмите гаечный ключ — выберите раздел «Конструктор карт Яндекса» и скопируйте туда код из iframe.
Опубликуйте страницу и карта появится на вашей странице, со всеми метками, оформлением и текстом, что вы добавили в конструкторе карт!
