Кнопки построить маршрут

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

Верстка

<div class="mobile-travel-track">

<h2>Проложить маршрут:</h2>

<div class="tarcks">
<a href="yandexmaps://build_route_on_map?lat_to=43.123456&amp;lon_to=39.123456">
<img src="/wp-content/uploads/2020/10/yandex_maps_150.png">
Яндекс Карты
</a>

<a href="yandexnavi://build_route_on_map?lat_to=43.123456&amp;lon_to=39.123456">
<img src="/wp-content/uploads/2020/10/YandexNavigator_150.png">
Яндекс Навигатор
</a>

<a class="chrome-link" href="google.navigation:q=43.123456,39.123456&amp;mode=d">
<img src="/wp-content/uploads/2020/10/Maps_Logo_150.png">
Google Maps
</a>

</div>

</div>

В ссылках указываем координаты текущего объекта.

Стили

.mobile-travel-track {display: none;}
.tarcks {display: flex; justify-content: center;}
.tarcks > * {width: 33.33%; text-align: center;}
.tarcks img {max-width: 50px; display: block; margin: 0 auto;}
body.ios .chrome-link {display: none;}

@media screen and (max-device-width: 800px) { 
.mobile-travel-track {display: block};
}

В системе iOS как всегда есть нюансы. Эта система не очень хорошо работает с Google Maps, используя по умолчанию свое приложение с картами и ссылка на Google Maps работать в iOS не будет. Поэтому мы должны отключить этот вариант для iOS.

Чтобы выявить устройство с iOS используем функцию:

// Определение устройства с iOS

add_filter('body_class','ios_class');
function ios_class($classes) {
	if( preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] ) ) { $classes[] = 'ios'; }
	return $classes;
}

Есть еще один момент уже связанный с приложением Яндекс Навигатор, в сутки можно перейти по этой ссылке не более нескольких раз. Далее срабатывает ограничение и переход не происходит. Но данный момент не является критичным, т.к. вряд ли пользователь будет много раз в день переходить по данной ссылке.

[site-socialshare]