Jak stworzyć link dla wszystkich urządzeń mobilnych, który otwiera mapy google z trasą rozpoczynającą się w aktualnej lokalizacji, prowadzącą w dane miejsce?

Raczej myślałem, że nie będzie to takie trudne do znalezienia, ale pozornie nie jest łatwo znaleźć niesamowity artykuł na temat różnych urządzeń, tak jak można się spodziewać.

Chcę utworzyć link, który otwiera przeglądarkę urządzenia mobilnego i przegląda mapy google LUB otwiera aplikację map (Apple Maps lub Google Maps) i bezpośrednio rozpoczyna trasę, tj .: zacznij w aktualnej lokalizacji, zakończ w danym punkcie ( lat / long).

Mogę testować na dwóch urządzeniach (poza stosem przeglądarki), Androidem i iPhonie.

Poniższy link działa tylko na Androidzie:

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

Kliknięcie tego linku w przeglądarce Chrome iPhone'a powoduje dziwne otwarcie Map Google w wersji na komputery z reklamami w aplikacji mobilnej ...

Ten działa tylko na iOS, otwierając Apple Maps z prośbą o podanie lokalizacji początkowej (mogę wybrać „Aktualna lokalizacja”) i rozpocząć trasę = pożądane zachowanie. Kliknięcie tego linku całkowicie kończy się niepowodzeniem w systemie Android:

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

Zwróć uwagę na protokół maps: //.

Czy istnieje elegancki sposób tworzenia takiego łącza na różnych urządzeniach? Jedno łącze, które działa na wszystkich głównych telefonach komórkowych?

Dzięki

AKTUALIZACJA: znaleziono rozwiązanie (trochę)

Oto, co wymyśliłem. Nie do końca to sobie wyobrażałem, chociaż działa.

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://protokół jest schemat URL jabłka odwzorowuje aplikację, która będzie tylko rozpocząć pracę na iOS 6 lub wyższym. Istnieją sposoby, aby sprawdzić, czy gmaps jest zainstalowana, a następnie wybrać, co zrobić z adresem URL, ale to było trochę za dużo w stosunku do tego, co zamierzałem. Skończyło się więc na utworzeniu linku maps: // OR maps.google.com/, używając powyższych parametrów.

** AKTUALIZACJA **

niestety, $ .browser.device nie działa od wersji 1.9 jquery (źródło - http://api.jquery.com/jquery.browser )

Uhmm, nie pracowałem zbyt wiele z telefonami, więc nie wiem, czy to zadziała, ale z punktu widzenia html / javascript możesz po prostu otworzyć inny adres URL w zależności od urządzenia użytkownika?

<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]");
}

Co ciekawe, http://maps.apple.comlinki otwierają się bezpośrednio w Mapach Apple na urządzeniu z iOS lub w inny sposób przekierowują do Map Google (które są następnie przechwytywane na urządzeniu z Androidem), więc możesz stworzyć dokładny adres URL, który zadziała prawidłowo w obu przypadkach, używając znaku „ Apple Maps ”, na przykład:

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

Alternatywnie możesz użyć /mapsadresu URL Map Google bezpośrednio (bez komponentu URL), aby otworzyć bezpośrednio w Mapach Google na urządzeniu z Androidem lub w przeglądarce mobilnej Map Google na urządzeniu z iOS:

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

właśnie natknąłem się na to pytanie i znalazłem tutaj wszystkie odpowiedzi. Wziąłem niektóre z powyższych kodów i wykonałem prostą funkcję js, która działa na Androidzie i iPhonie (obsługuje prawie każdy Android i 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>

Działa to na wszystkich urządzeniach [iOS, Android i Windows Mobile 8.1].

W żadnym wypadku nie wygląda na najlepszy ... ale nie może być prostszy :)

<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);
   }
 });
 });
 }

Prosty adres URL:

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

Ten adres URL jest specyficzny dla routingu.

Źródła: https://developers.google.com/maps/documentation/urls/guide#directions-action

Cóż, nie, od potencjalnego programisty iOS są dwa linki, o których wiem, że otworzą aplikację Mapy na iPhone'a

W systemie iOS 5 i starszym: http://maps.apple.com?q=xxxx

W iOS 6 i nowszych: http://maps.google.com?q=xxxx

I to tylko w Safari. Chrome przekieruje Cię na stronę internetową Google Maps.

Poza tym musisz użyć schematu adresu URL, który w zasadzie jest lepszy od celu, ponieważ żaden android nie zna tego protokołu.

Możesz chcieć wiedzieć, dlaczego Safari otwiera aplikację Mapy, a Chrome kieruje mnie na stronę internetową?

Cóż, ponieważ safari to wbudowana przeglądarka stworzona przez Apple i może wykryć powyższy adres URL. Chrome to „tylko kolejna aplikacja” i musi być zgodna z ekosystemem iOS. Dlatego jedynym sposobem komunikacji z innymi aplikacjami jest użycie schematów adresów URL.

W oparciu o dokumentacjęorigin parametr jest opcjonalny i jest domyślnie lokalizacji użytkownika.

... 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....

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

U mnie działa to na komputerach stacjonarnych, iOS i Android.

Składnia adresu URL jest taka sama, niezależnie od używanej platformy

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

W systemie Android lub iOS adres URL uruchamia Mapy Google w aplikacji Mapy. Jeśli aplikacja Mapy Google nie jest zainstalowana, adres URL uruchamia Mapy Google w przeglądarce i wykonuje żądaną czynność.

Na każdym innym urządzeniu adres URL uruchamia Mapy Google w przeglądarce i wykonuje żądaną czynność.

tutaj jest link do oficjalnej dokumentacji https://developers.google.com/maps/documentation/urls/guide

Odkryłem, że to działa na wszystkich tablicach:

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

W przypadku komputerów stacjonarnych / laptopów użytkownik musi kliknąć opcję Wskazówki dojazdu po załadowaniu mapy, ale z moich testów wszystkie urządzenia mobilne bez problemu załadują ten link w aplikacji Mapy Google.