Создание универсальной ссылки на карты для 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('Ой! Не удалось открыть карту. Возможно, она на отдыхе?'); // Карты по-видимому говорят: "Не сегодня!"
}

Тестирование и оптимизация

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

Полезные материалы

1. Универсальные ссылки – Apple Developer — дополнительная информация о универсальных ссылках для приложений карт на устройствах Apple.
2. Начало работы | URL-адреса карт | Разработчики Google — руководства по использованию параметров URL для навигации с Картами Google.
3. Документация MDN: <a>: Элемент якоря — подробная документация по элементу ссылки (<a>) в HTML.
4. Документация – schema.org — рекомендации по интеграции структурированных данных для карт и навигации через schema.org.
5. API геолокации — спецификация W3C API геолокации.
6. Can I use... Support tables for HTML5, CSS3, etc — таблицы с информацией о совместимости геолокации HTML5 с различными браузерами.
7. Просмотр – OpenStreetMap Wiki — советы о том, как использовать параметры URL в OpenStreetMap для доступа к конкретным местам.