Установка карты на сайт. Виджет карты яндекс на сайт


Установка карты на сайт - Помощь

  1. Помощь
  2. Редактор Html5

 

Содержание:

Добавление виджетаНастройка карты через ЯндексВставка кода карты в виджет

 

Добавление виджета

 

Виджет карты, также как и все другие виджеты находится в левом меню.

 

После перемещения на рабочую область виджет отобразится следующим образом.

 

Настройка карты через Яндекс

 

Перейдем в конструктор карт Яндекса по ссылке http://api.yandex.ru/maps/tools/constructor/. Откроется такая вот страница.

 

Начните вводить адрес в строке поиска и выберите нужный из выпадающего списка.

 

Яндекс отметит адрес на карте кнопкой и покажет окно настройки. Вы можете отредактировать описание, изменить цвет и тип кнопки по своему усмотрению.

 

Вы также можете добавить сразу несколько адресов на одну карту. Просто введите новый адрес в поле поиска и выберете нужный из списка.

Все отмеченые на карте адреса отображаются слева.

 

Заполните поле "Название" и нажите кнопку "Сохранить и продолжить" чтобы перейти к следующему шагу.

 

Карта готова и вы можете увидеть, как она будет выглядеть.

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

 

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

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

Закончив настройку нажмите "Получить код карты".

Появится код, скопируйте его.

 

Вставка кода карты в виджет

 

Вернемся в редактор. Дважды левой кнопкой мышки нажмите на виджет, после чего откроется окно. Вставьте в этом окне скопированный ранее код вашей карты.

 

Посмотрим, что у нас получилось.

 

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

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

 

Но! В режиме просмотра все будет правильно

 

Спасибо!

www.a5.ru

Карты (виджет) — Яндекс и Google maps – База знаний LPgenerator.ru

Здравствуйте, уважаемые пользователи платформы!

Сегодня мы готовы порадовать вас очередным новым виджетом нашего редактора,который называется «Карты».

Теперь добавить на вашу посадочную страницу карту Google или Яндекс можно всего за пару кликов!

1. Откройте необходимый лендинг в редакторе LPgenerator:

2. На панели слева кликните по значку виджета карт:

 3. В открывшемся окне выберите тип карты: Яндекс.Карты или Google Maps.

4. Впишите нужный адрес:

Желательно (но необязательно) вводить адрес в определенной последовательности:

  • формат адреса для Google Maps — улица, номер дома, город, область;
  • формат адреса для Яндекс.Карт — страна, город, улица, номер дома.

В случае, если после введения адреса он не применяется к карте, вы можете задать адрес с помощью координат.

Для того, чтобы узнать координаты точки в Google кликните правой кнопкой мыши по нужному месту, нажмите «Что здесь?», после чего скопируйте координаты внизу страницы:

Чтобы узнать координаты точки в Яндекс, достаточно кликнуть по нужному месту, а затем на левой панели скопировать нужные координаты:

После этого вставьте скопированные координаты в виджет карт:

5. Если вы хотите, чтобы карта отображалась по всей ширине экрана, то поставьте галочку в чекбоксе виджета «На всю ширину»:

6. Отредактируйте приближение:

Обратите внимание: на лендинге карта от Яндекс отображается в формате «Схема», а карта от Google в режиме «Карта». При просмотре и посещении вашей посадочной страницы посетитель сможет самостоятельно выбрать нужный тип отображения.

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

8. Готово. Обратите внимание: на страницу может быть добавлено несколько различных карт.

Если карта не отображается, это значит, что, скорее всего, Ваш браузер или его настройки не соответствуют требованиям для яндекс карт и системным требованиям для Google Maps

Высоких вам конверсий и приятной работы!

lpgenerator.zendesk.com

Настройки виджетов — Технологии Яндекса

  1. Параметры виджета
  2. Ссылка виджета
  3. Отображение стоимости поездки
  4. Свободное оформление виджета

Параметры виджета

Виджет Яндекс.Такси может содержать следующие параметры:<div data-size="xs|s|m" data-theme="normal|dark|action" data-title="название виджета" data-description="описание виджета" data-point-а="<долгота>,<широта>" data-point-b="<долгота>,<широта>" data-use-location="<true|false>" data-proxy-url="URL для проксирования" data-clid="идентификатор пользователя" data-apikey="ключ API" data-picture="URL картинки" data-nonce="nonce-атрибут" data-zoom="масштаб карты" data-custom-layout="<true|false>" …> </div>data-size Тип виджета. Возможные значения: data-theme Тема виджета. Возможные значения: data-title Название виджета, например «На такси в Яндекс». data-description Описание виджета, например «Льва Толстого, 16». Необязательный параметр. data-point-a

Координаты пункта отправления в формате <долгота>,<широта>. Необязательный параметр.

Значения долготы и широты адреса можно узнать при помощи Геокодера.

data-point-b

Координаты пункта назначения в формате <долгота>,<широта>.

Значения долготы и широты адреса можно узнать при помощи Геокодера.

data-use-location Признак использования местоположения пользователя. Возможные значения: data-picture URL изображения, которое можно отображать в виджете с изображением (data-size="m") вместо карты. Необязательный параметр. data-nonce Nonce-атрибут. data-zoom Масштаб карты для виджета с изображением (data-size="m"). Значение по умолчанию — 17. data-custom-layout Признак свободного оформления виджета.

Ссылка виджета

Параметр data-proxy-url определяет способ перенаправления пользователя на сайт Яндекс.Такси.

data-proxy-url URL для перехода на сайт Яндекс.Такси. Пример такого URL: https://3.redirect.appmetrica.yandex.com/route?start-lat={start-lat}&amp;start-lon={start-lon}&amp;end-lat={end-lat}&amp;end-lon={end-lon}&amp;ref=widget&amp;appmetrica_tracking_id=1178268795219780156&amp;utm_source=widget

Подставлять координаты в ссылку не требуется — параметры {start-lat}, {start-lon}, {end-lat} и {end-lon} автоматически получают значения из параметров виджета.

Если переход осуществляется с мобильного устройства, на котором не установлено приложение Яндекс.Такси, то пользователь будет перенаправлен в магазин приложений соответствующей платформы (Google Play/App Store). Чтобы перенаправлять таких пользователей на мобильный сайт Яндекс.Такси, необходимо заменить числовое значение параметра appmetrica_tracking_id ссылки на 25395763362139037.

Подробнее параметры ссылки и логика редиректов описаны в разделе Формирование ссылок.

Отображение стоимости поездки

Чтобы отобразить в виджете стоимость поездки, используйте следующие параметры:

data-clid Идентификатор клиента для авторизации. Чтобы получить идентификатор, заполните анкету на странице API прогноза стоимости. data-apikey Ключ API для авторизации. Чтобы получить ключ, заполните анкету на странице API прогноза стоимости.

Свободное оформление виджета

Виджет со свободным оформлением (data-custom-layout="true") позволяет показывать информацию без использования стилей. В этом случае, содержание виджета можно располагать в других элементах страницы. Для этого укажите следующие признаки для элементов страницы:

tech.yandex.ru