Віджет-система EasyWay
Київ
06:13

Что такое виджет?

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

Какие виджеты бывают?

Виджеты бывают двух типов: персональный и полнофункциональный

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

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

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

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

Пример персонального виджета можно найти на промо странице услуги.

Примеры полнофункциональных виджетов:

Сколько стоит виджет?

Стоимость полнофункционального виджета оговаривается индивидуально. 

Стоимость персонального виджета начинается от 49 грн(месяц). Более подробно на промо странице услуги

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

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

  • доменное имя сайта, на котором будет установлен виджет,
  • физический адрес Вашего офиса(офисов)
  • цветовую гамму

Обратите внимание, что виджет будет работать только на указанном Вами сайте.

 Что такое цветовая гамма виджета?

Цветовая гамма - параметр для красивой интеграции виджета. Этот параметр влияет на визуальное отображение следующих элементов:

  • Цвет фона и шрифта шапки
  • Цвет элементов на панели виджета
  • Цвет линии маршрута, иконок остановок и пересадок
  • Цвет окантовки вокруг подсказок

Для удобства мы разработали 11 вариантов самых используемых цветовых гамм, так что все, что Вам необходимо сделать, - это просто выбрать цвет!
Полный список цветов доступен по этой ссылке.

Как настроить свой виджет?

Полный код вставки виджета выглядит следующим образом:

<script src="http://maps.google.com/maps/api/js?sensor=false&language=GOOGLE_LANG" type="text/javascript"></script>
<script type="text/javascript" src="http://widget.eway.in.ua/js/EasyWayWidget.js"</script>

<div id="eway-widget-container" style="width: Xpx; height: Ypx"></div>

<script type="text/javascript">
	var ewayWidget = EasyWayWidget({
			"id": ID,
			"hash": "HASH",
			["lang": "LANG"],
			["width": X],
			["height": Y],
			["container_id": "DIV_CONTAINER_ID"],
			["eWayJQuery": jQuery],
			[callback: function(j){…}], 		
			[transport: {
				[mode: MODE],	
				[types: array of TYPES],
				[direct: DIRECT]
			}]

});
</script>
Имя параметра Описание
id, hash (обязательные параметры)
Уникально определяют настройки виджета, а именно:
  • адрес сайта,
  • количество точек ДО, а также их координаты
  • цветовую гамму виджета
  • размеры виджета по умолчанию
  • язык виджета по умолчанию
container_id (обязательный параметр)
ID div-контейнера, в котором будет отображаться содержимое виджета 
lang Язык отображения данных и интерфейса виджета. Может принимать одно из следующих значений
  • ua
  • ru
  • en
width Ширина виджета в пикселях, принимает любое целое значение.
Если Вы хотите, что бы виджет занимал все доступное по ширине пространство, установите значение width равное 0.
height Высота виджета в пикселях
eWayJQuery Дескриптор jQuery, который будет использовать виджет
callback: function(j){…} j – дескриптор jQuery, которую загружает виджет. Подобный вызов используется при размещении нескольких виджетов на одной странице, как например тут
mode Тип транспорта. Принимает значения
  • auto - автомобиль
  • public - общественный транспорт
По умолчанию mode=public
types Активные типы общественного транспорта. Возможные значения
  • bus - автобус
  • tram - трамвай
  • trol - троллейбус
  • metro - метро
  • train - электричка
  • boat - катер, паром
По умолчанию активны все типы общественного транспорта.
Значение параметра types игнорируется, если mode=auto.
Несуществующие для конкретного города значения types также игронируются.
direct Поиск маршрутов без пересадок
  • true
  • false
По умолчанию false
Значение параметра direct игнорируется, если mode=auto

Какие условия корректной работы виджета

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

либо

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Виджет корректно работает в IE 7+, Firefox, Mozilla, Chrome, Opera и Safari, мы тестировали работу виджета на сайтах под управлением CMS Joomla, вместе с javascript библиотеками Jquery и(или) Mootols.  Для своей работы виджет использует javascript библиотеки jquery-1.6.2.min.js

По запросу мы решаем возможные проблемы с интеграцией виджета в CMS Вашего сайта.

Мой сайт работает на нескольких языках. Можно ли использовать один и тот же виджет на страницах с разными языками?

Да. Для этого Вам необходимо интегрировать код вставки виджета в Вашу систему управления сайтом. В настройках виджета за язык отвечает параметр lang, который принимает одно из значений {ua,ru,en}. Настройте страницу, на которой используется виджет, таким образом, что бы в значение параметра lang подставлялся текущий язык отображения данных.

При смене языка для корректного геокодинга и отображения карты необходимо также изменить язык Google Maps. Для этого необходимо при инициализации Google Maps изменить параметр language. Обратите внимание, что для украинского языка корректное значение параметра languageuk.

Как изменить виджет?

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

Для чего нужна статистика использования виджета?

Статистика использования позволит Вам провести экспресс-анализ мест в городе, из которых клиенты ищут пути проезда к Вашим объектам. Вы сможете проанализировать необходимость открытия нового филиала, целесообразность территориального размещения рекламных материалов и т.д. Статистика использования в связке со средствами веб-аналитики (как Google Analytics), позволит Вам более полно проводить маркетинговые исследования.

Какие еще возможности предоставляет виджет?

Виджет имеет несколько полезных методов - GetMap(), Maximize() и Run().

GetMap() - возвращает объект google.maps.Map, c которым работает виджет. Вы можете самостоятельно добавить на карту необходимые Вам дополнительные элементы

ewayWidget.GetMap();

Maximize() - позволяет раскрыть виджет на весь экран. Очень удобен, если виджет не отображается сразу, а вызывается, например, при клике на картинке.

ewayWidget.Maximize();

Run() - позволяет запускать в виджете поиск

ewayWidget.Run({
	lat: LAT,
	lng: LNG,
	[address_id: ADDRESS_ID],
	[transport: {
			[mode: MODE],	
			[types: array of TYPES],
			[direct: DIRECT]
	}]
});
Имя параметра Описание
lat, lng (обязательные параметры)
Координаты точки ОТ
address_id При необходимости можно задать точку ДО, указав ее id.
По умолчанию будет выбрана текущая точка ДО
transport Параметр позволяет задать критерии поиска пути. Синтаксис аналогичен описанному выше в разделе "Как настроить свой виджет?"
Обратите внимание, что при задании параметра transport, указанные в нем значения установятся в виджете.

 




comments powered by Disqus
Блог