Как проложить маршрут с сайта

Как проложить маршрут с сайта

Чтобы клиентам было проще вас находить предлагаем использовать в мобильной версии сайта не только карту, а еще и возможность проложить маршрут к вашей организации с помощью Яндекс.Карт, Яндекс.Навигатора и Google.Maps.

Вот например как это выглядит страница в Desktop версии и в Mobile версии

 

 

Отображение блоков только в Mobile версии реализовано с помощью классов Bootstrap hidden-lg hidden-md

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

Допустим адрес нашей компании: Санкт-Петербург, ул. Константина Заслонова, 18

Иконки можете взять либо в Яндекс/Google картинках либо попросить дизайнера отрисовать в вашей стилистике.

Координаты точки (широта и долгота) можно взять из URL в Яндекс.Картах или в Google.Maps нажав ПКМ – Что здесь?

Яндекс.Навигатор и Яндекс.Карты это разные приложения, соответственно и ссылки будут разные.

Ссылка для Яндекс.Карт:
<a href=’yandexmaps://build_route_on_map?lat_to=59.918423&lon_to=30.347444′>
Yandex навигатор
</a>

Ссылка для Яндекс.Навигатора:
<a href=’yandexnavi://build_route_on_map?lat_to=59.918423&lon_to=30.347444′>
Yandex навигатор
</a>

Ссылка для Google.Maps:

<a href=’google.navigation:q=59.918423, 30.347444&amp;mode=d’>
Google maps
</a>

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

See the Pen
Как проложить маршрут с сайта
by Evgen (@berloga13)
on CodePen.

Если вы добавляете ссылку с незарегистрированным протоколом например в блок редактора страницы Classic Editor, то при очистке html кода данный протокол будет удален, а ссылка перестанет работать!

Разрешенные протоколы c версии WordPress 5.8.2. :
$ Protocol = массив (‘http’, ‘https’, ‘ftp’, ‘ftps’, ‘mailto’, ‘news’, ‘irc’, ‘irc6’, ‘ircs’, ‘gopher’, ‘nntp’, ‘ feed ‘,’ telnet ‘,’ mms ‘,’ rtsp ‘,’ sms ‘,’ svn ‘,’ tel ‘,’ fax ‘,’ xmpp ‘,’ webcal ‘,’ urn ‘);

Как видите нужных нам протоколов yandexnavi, yandexmaps и google.navigation нет.

Решение очень простое!

Чтобы добавить нужные протоколы, например Яндекс Навигатора (yandexnavi://) в список разрешенных протоколов в WordPress необходимо в файле functions.php Вашей темы (Консоль WP — Внешний вид — Редактор тем — function.php) разместить следующий код:

add_filter( 'kses_allowed_protocols', 'add_yandexmaps_to_allowed_protocols' );

function add_yandexmaps_to_allowed_protocols( $protocols ) {
	$protocols[] = 'yandexmaps';
	return $protocols;
	}

add_filter( 'kses_allowed_protocols', 'add_yandexnavi_to_allowed_protocols' );
function add_yandexnavi_to_allowed_protocols( $protocols ) {
	$protocols[] = 'yandexnavi';
	return $protocols;
	}

add_filter( 'kses_allowed_protocols', 'add_googlenavigation_to_allowed_protocols' );
function add_googlenavigation_to_allowed_protocols( $protocols ) {
	$protocols[] = 'google.navigation';
	return $protocols;
	}

И все должно работать, а проверять это нужно естественно с мобильных телефонов где установлены приложения навигации

Если у вас возникли сложности – записывайтесь на индивидуальное занятие и мы вместе подробно разберем конкретно ваш сайт.

No comments.