Создание универсальной ссылки на карты для Android и iOS
Быстрый ответ
Для начала навигации в приложении карт, установленном на устройстве пользователя по умолчанию, используйте универсальную ссылку на карту https://www.google.com/maps/?daddr=lat,long
. Достаточно вставить следующий HTML-код:
<a href="https://www.google.com/maps/?daddr=37.4220,-122.0841">Построить маршрут до точки назначения</a>
Замените координаты 37.4220,-122.0841
на необходимые. Эта ссылка направит пользователя к указанной точке назначения на любом устройстве.
Определение типа устройства с помощью JavaScript
Для усовершенствования пользовательского опыта можно воспользоваться JavaScript, который позволяет определить тип устройства и открыть соответствующее ему приложение карт:
function openMapApp(destination) {
var latLong = "37.4220,-122.0841"; // Вставьте необходимые координаты в формате 'широта,долгота'
var iosMapUrl = "http://maps.apple.com/?daddr=" + latLong;
var androidMapUrl = "http://maps.google.com/?daddr=" + latLong;
var universalLink = "https://www.google.com/maps/?daddr=" + latLong;
if (/(iPhone|iPad|iPod)/.test(navigator.platform)) {
window.open(iosMapUrl);
} else if (/android/i.test(navigator.userAgent)) {
window.open(androidMapUrl);
} else {
window.open(universalLink); // Для других устройств
}
}
// Пример использования:
// <button onclick="openMapApp('37.4220,-122.0841')">Построить маршрут до Googleplex</button>
Установка параметров способа передвижения
Для более точного построения маршрута можно использовать параметры способов перемещения:
&mode=d
для передвижения на автомобиле&mode=b
для велосипедных маршрутов&mode=w
для пешеходного маршрута&mode=r
при использовании общественного транспорта
Пример URL с указанием способа передвижения:
<a href="https://www.google.com/maps/?daddr=37.4220,-122.0841&mode=d">Добраться до Googleplex на автомобиле</a>
Визуализация
Представьте, что каждый смартфон — это почтовый голубь:
📧 -> 🍏: Запускаются Карты Apple, строится **маршрут** до 📍
📧 -> 🤖: Запускаются Google Карты, намечается **маршрут** до 📍
📧 -> 🪟: Запускаются Bing Карты, выводится **маршрут** до 📍
Каждый голубь умеет найти пункт назначения независимо от типа устройства.
// Пример HTML-ссылки:
<a href="**Универсальная ссылка**" target="_blank">Построить маршрут 🧭</a>
Универсальная ссылка адаптируется под приложение карт, установленное на устройстве пользователя.
Рекомендации по совместимости устройств и применению геолокации
Для более удобного использования вашего сервиса можно применить API геолокации HTML5, чтобы определить текущее местоположение пользователя для построения динамического маршрута:
function getLocationAndNavigate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var userLatitude = position.coords.latitude;
var userLongitude = position.coords.longitude;
var destinationLink = "https://www.google.com/maps/?saddr=" + userLatitude + "," + userLongitude + "&daddr=destination";
// Применяем описанный выше метод 'Определение типа устройства с JavaScript'
});
} else {
alert("К сожалению, геолокация не поддерживается в этом браузере."); // Обидное обстоятельство.
}
}
// Пример в HTML:
// <button onclick="getLocationAndNavigate()">Найти маршрут от моего местоположения</button>
Для расширения возможностей общей карты и добавления продвинутых функций рекомендуется обратиться к библиотекам Leaflet или Mapbox.
Обработка исключений и ошибок
Если что-то идёт не так, в частности при определении платформы:
- Подготовьте запасной вариант в виде универсальной ссылки
- Используйте конструкцию
try...catch
для обработки неожиданных ситуаций - Сообщите пользователю, если его устройство не справляется с задачей
Постарайтесь представить проблему в весёлом ключе:
try {
openMapApp('37.4220,-122.0841');
} catch (e) {
alert('Ой! Не удалось открыть карту. Возможно, она на отдыхе?'); // Карты по-видимому говорят: "Не сегодня!"
}
Тестирование и оптимизация
- Проведите тестирование на разных устройствах для бесперебойной работы функционала
- Проверьте, что способы передвижения выбраны корректно
- Оптимизируйте скрипты для их быстрой загрузки
Полезные материалы
- Универсальные ссылки – Apple Developer — дополнительная информация о универсальных ссылках для приложений карт на устройствах Apple.
- Начало работы | URL-адреса карт | Разработчики Google — руководства по использованию параметров URL для навигации с Картами Google.
- Документация MDN:
<a>: Элемент якоря
— подробная документация по элементу ссылки (<a>
) в HTML. - Документация – schema.org — рекомендации по интеграции структурированных данных для карт и навигации через schema.org.
- API геолокации — спецификация W3C API геолокации.
- Can I use... Support tables for HTML5, CSS3, etc — таблицы с информацией о совместимости геолокации HTML5 с различными браузерами.
- Просмотр – OpenStreetMap Wiki — советы о том, как использовать параметры URL в OpenStreetMap для доступа к конкретным местам.