Найти тему
Деловые связи

Как создать и разместить яндекс карту на своём сайте?

Оглавление

Сегодня у большинства интернет-магазинов есть шоу-рум или, по крайней мере, пункт самовывоза. В этом случае потенциальный клиент, желающий приобрести товар в интернет-магазине, может спросить: "Я живу в том же городе, что и пункт самовывоза, и адрес указан, но как мне его найти? Я не знаю названия улиц и не знаю, как туда добраться".

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

Так как же создать карту с адресом вашего магазина и разместить её на сайте?

Сегодня мы расскажем, как встроить интерактивную Яндекс. Карту в страницу контактов вашего интернет-магазина, созданного на платформе 1С-Битрикс.

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

-2

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

Шаг №1 - Создание (размещение и кодирование точек и линий на карте).

Сначала разберитесь с активными элементами управления на карте. Чтобы помочь вам в этом, мы предоставили изображение с обозначениями и их дальнейшим объяснением.

Добавление точки на карту
Добавление точки на карту
  • Кнопка "Метки" позволяет размещать и подписывать точки на карте. Вы можете отметить и подписать точку, где находится, например, ваш офис. Вы можете выбрать количество точек и оформление каждой из них.
  • Кнопка "Линии" позволяет нарисовать оптимальный маршрут к вашему офису.
  • Кнопка "Многоугольники" позволяет рисовать сложные объекты, например, склады. Чтобы закончить рисование, нажмите Esc или щелкните на любой узловой точке и выберите соответствующий пункт меню.
  • Используйте ползунок масштабирования для увеличения или уменьшения масштаба карты, чтобы увидеть нужную область.
  • Чтобы установить размер окна, "перетащите" правый нижний угол карты.

Шаг № 2 - Предварительный просмотр (чтобы увидеть, как карта будет отображаться на вашем сайте).

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

"Интерактивная карта". Посетители магазина могут увеличивать масштаб и видеть другие участки карты.

"Статическая карта". Простое изображение созданной карты. Например, если вы хотите разместить ее в своем блоге или отобразить в RSS-ленте.

выбор типа и размеров карты
выбор типа и размеров карты

На первом этапе вы отметили пункты приема и выделили направления к отмеченным местам линиями. Вы выбрали интерактивную карту, и на шаге отображения она выглядела следующим образом. Посмотрите отмеченные места на ЯндексКарте.

Шаг №3 - Код для вставки (получите код для вашего сайта или блога).

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

Получение кода карты
Получение кода карты

Код ЯндексКарты Сгенерированную карту можно разместить в блоге или на личной странице; чтобы разместить ее на контактах интернет-магазина, созданного на платформе 1С-Битрикс.

Если у вас возникнут трудности с размещением кода карты на сайте вы можете обратиться к нам, мы поможем! Это займет не больше 1 часа.