Як створити посилання для всіх мобільних пристроїв, яке відкриває карти Google із маршрутом, що починається з поточного місця, що призначає дане місце?

Я швидше думав, що це буде не так важко з'ясувати, але, очевидно, непросто знайти приголомшливу статтю про різні пристрої, як ви очікували.

Я хочу створити посилання, яке відкриває або браузер мобільного пристрою, і переглядає Google Maps АБО відкриває додаток карт (Apple Maps або Google Maps) і безпосередньо починаючи маршрут, тобто: почати з поточного місця, закінчити в певній точці ( лат / довга).

Я можу тестувати на двох пристроях (поряд із браузером), на Android та iPhone.

Наступне посилання працює лише на Android:

<a href="http://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

Клацнувши це посилання в Chrome iPhone, це дивно відкриває Карти Google у настільній версії з рекламою в мобільному додатку ...

Цей працює лише на iOS, відкриваючи Карти Apple, просячи мене ввести початкове місце (я можу вибрати "Поточне місце") і почати маршрут = бажана поведінка. Натискання цього посилання повністю не вдається на Android:

<a href="maps://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

Зверніть увагу на maps: // protocol.

Чи існує елегантний спосіб створення такого посилання на різних пристроях? Одне посилання, яке працює на всіх основних мобільних телефонах?

Дякую

ОНОВЛЕННЯ: Рішення знайдено (певне)

Ось що я придумав. Це не зовсім те, що я собі уявляв, хоча працює.

var ua = navigator.userAgent.toLowerCase(),
    plat = navigator.platform,
    protocol = '',
    a,
    href;

$.browser.device = ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i) ? ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i)[0] : false;


if ($.browser.device) {
    switch($.browser.device) {
        case 'iphone':
        case 'ipad':
        case 'ipod':
            function iOSversion() {
              if (/iP(hone|od|ad)/.test(navigator.platform)) {
                // supports iOS 2.0 and later: <http://bit. ly/TJjs1V>
                var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
              }
            }

            var ver = iOSversion() || [0];

            if (ver[0] >= 6) {
              protocol = 'maps://';
            }
            else {
                protocol = 'http://maps.google.com/maps';
            }
        break;

        case 'android':
        default:
            protocol = 'http://maps.google.com/maps';
        break;
    }

a.attr('href', protocol + href)

maps://протокол схема URL для яблука відображає додаток, яке буде тільки почати працювати на IOS 6 або вище. Є способи перевірити, чи встановлено gmaps, а потім вибрати, що робити з URL-адресою, але це було занадто багато для того, що я задумав. Тож я щойно закінчив створення мапи: // АБО maps.google.com/ посилання, використовуючи наведені вище параметри.

** ОНОВЛЕННЯ **

на жаль, $ .browser.device не працює з jquery 1.9 (джерело - http://api.jquery.com/jquery.browser )

М-м-м-м, я мало працював з телефонами, тому я не знаю, чи це буде працювати, але з точки зору html / javascript, чи можете ви просто відкрити іншу URL-адресу, залежно від пристрою користувача?

<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>

function myNavFunc(){
    // If it's an iPhone..
    if( (navigator.platform.indexOf("iPhone") != -1) 
        || (navigator.platform.indexOf("iPod") != -1)
        || (navigator.platform.indexOf("iPad") != -1))
         window.open("maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
    else
         window.open("https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
}

Цікаво, що http://maps.apple.comпосилання відкриватимуться безпосередньо в Apple Maps на пристрої iOS або в іншому випадку переспрямовуватимуть на Google Maps (що потім перехоплюється на пристрої Android), тому ви можете створити обережну URL-адресу, яка в обох випадках буде робити правильно, використовуючи " URL-адреса Карт Apple ", наприклад:

http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA

Крім того, ви можете використовувати URL-адресу Карт Google безпосередньо (без /mapsкомпонента URL-адреси), щоб відкрити його безпосередньо в Картах Google на пристрої Android або в мобільному Інтернеті Карт Google на пристрої iOS:

http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA

просто наткнувся на це питання і знайшов тут усі відповіді. Я взяв деякі з наведених вище кодів і зробив просту функцію js, яка працює на android та iphone (вона підтримує майже всі android та iphone).

  function navigate(lat, lng) {
    // If it's an iPhone..
    if ((navigator.platform.indexOf("iPhone") !== -1) || (navigator.platform.indexOf("iPod") !== -1)) {
      function iOSversion() {
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
          // supports iOS 2.0 and later
          var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
          return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
        }
      }
      var ver = iOSversion() || [0];

      var protocol = 'http://';
      if (ver[0] >= 6) {
        protocol = 'maps://';
      }
      window.location = protocol + 'maps.apple.com/maps?daddr=' + lat + ',' + lng + '&ll=';
    }
    else {
      window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&ll=');
    }
  }

Html:

 <a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>

Це працює для мене на всіх пристроях [iOS, Android та Window Mobile 8.1].

Не виглядає найкращим чином у будь-якому випадку ... але не може бути простішим :)

<a href="bingmaps:?cp=18.551464~73.951399">
 <a href="http://maps.apple.com/maps?q=18.551464, 73.951399"> 
   Open Maps
 </a>
</a>

http://jsbin.com/dibeq

if (navigator.geolocation) { //Checks if browser supports geolocation
navigator.geolocation.getCurrentPosition(function (position) {                                                                                            
 var latitude = position.coords.latitude;                    //users current
 var longitude = position.coords.longitude;                 //location
 var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
 var directionsService = new google.maps.DirectionsService();
 var directionsDisplay = new google.maps.DirectionsRenderer();
 var mapOptions = //Sets map options
 {
   zoom: 15,  //Sets zoom level (0-21)
   center: coords, //zoom in on users location
   mapTypeControl: true, //allows you to select map type eg. map or satellite
   navigationControlOptions:
   {
     style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
   },
   mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
 };
 map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"),    mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));
 var request = {
   origin: coords,
   destination: 'BT42 1FL',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function (response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });
 });
 }

Проста URL-адреса:

https://www.google.com/maps/dir/?api=1&destination=lat,lng

Ця URL-адреса призначена для маршрутизації.

Довідково: https://developers.google.com/maps/documentation/urls/guide#directions-action

Ну ні, від потенційного розробника iOS, я знаю два посилання, які відкриють додаток Карти на iPhone

На iOS 5 і старіших версіях: http://maps.apple.com?q=xxxx

На iOS 6 і новіших версіях: http://maps.google.com?q=xxxx

І це лише на Safari. Chrome направить вас на веб-сторінку Карт Google.

Крім цього, вам потрібно буде використовувати схему URL-адреси, яка в основному відповідає цілі, оскільки жоден андроїд не знатиме цей протокол.

Можливо, ви захочете дізнатися, чому Safari відкриває додаток Карти, а Chrome спрямовує мене на веб-сторінку?

Ну, оскільки сафарі - це вбудований браузер, зроблений Apple, і він може виявити URL-адресу вище. Chrome - "просто черговий додаток" і повинен відповідати екосистемі iOS. Тому єдиним способом спілкування з іншими програмами є використання URL-схем.

На підставі документаціїorigin параметр є необов'язковим , і він по замовчуванням розташування користувача.

... Defaults to most relevant starting location, such as user location, if available. If none, the resulting map may provide a blank form to allow a user to enter the origin....

напр .: https://www.google.com/maps/dir/?api=1&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling

Для мене це працює на робочому столі, IOS та Android.

Синтаксис URL-адрес однаковий незалежно від використовуваної платформи

String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+ 
longitude;

В Android або iOS URL-адреса запускає Карти Google у програмі Maps. Якщо програма Google Maps не встановлена, URL-адреса запускає Google Maps у браузері та виконує запитувану дію.

На будь-якому іншому пристрої URL-адреса запускає Карти Google у браузері та виконує запитувану дію.

ось посилання на офіційну документацію https://developers.google.com/maps/documentation/urls/guide

Я виявив, що це працює повсюдно:

<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>

Для настільних комп’ютерів / ноутбуків користувач повинен натиснути «Напрямки», коли ця карта завантажується, але під час мого тестування всі мобільні пристрої без проблем завантажать це посилання в програму Google Maps.