Wie erstelle ich einen Link für alle Mobilgeräte, der Google Maps mit einer Route öffnet, die am aktuellen Standort beginnt und einen bestimmten Ort bestimmt?

Ich dachte eher, dass dies nicht so schwer herauszufinden sein würde, aber anscheinend ist es nicht einfach, einen fantastischen geräteübergreifenden Artikel zu finden, wie man es erwarten würde.

Ich möchte einen Link erstellen, der entweder den Browser des Mobilgeräts öffnet und zu Google Maps surft ODER eine Karten-App (Apple Maps oder Google Maps) öffnet und direkt eine Route startet, dh: am aktuellen Standort beginnen, an einem bestimmten Punkt enden ( lat / long).

Ich kann auf zwei Geräten (neben dem Browserstack) testen, einem Android und einem iPhone.

Der folgende Link funktioniert nur unter Android:

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

Durch Klicken auf diesen Link in Chrome des iPhones wird Google Maps in der Desktop-Version mit Anzeigen in der mobilen App auf seltsame Weise geöffnet ...

Dieser funktioniert nur unter iOS und öffnet Apple Maps und fordert mich auf, einen Startort einzugeben (ich kann "Aktueller Ort" auswählen) und die Route = gewünschtes Verhalten zu starten. Das Klicken auf diesen Link schlägt unter Android vollständig fehl:

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

Beachten Sie das Protokoll maps: //.

Gibt es eine elegante geräteübergreifende Möglichkeit, eine solche Verbindung herzustellen? Ein Link, der auf allen Haupthandys funktioniert?

Vielen Dank

UPDATE: Lösung gefunden (irgendwie)

Folgendes habe ich mir ausgedacht. Es ist nicht ganz das, was ich mir vorgestellt habe, obwohl es funktioniert.

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)

Das maps://Protokoll ist das URL-Schema für die Apple Maps-App, die erst ab iOS 6 oder höher funktioniert. Es gibt Möglichkeiten zu testen, ob gmaps installiert ist, und dann auszuwählen, was mit der URL geschehen soll, aber das war etwas zu viel für das, was ich beabsichtigt hatte. Also habe ich gerade einen Maps erstellt: // OR maps.google.com/link, unter Verwendung der oben genannten Parameter.

** UPDATE **

leider $ .browser.device nicht funktionieren , da jquery 1.9 (Quelle - http://api.jquery.com/jquery.browser )

Ähm, ich habe nicht viel mit Telefonen gearbeitet, also weiß ich nicht, ob dies funktionieren würde, aber nur aus HTML / Javascript-Sicht könnten Sie einfach eine andere URL öffnen, je nachdem, welches Gerät der Benutzer hat?

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

Interessanterweise werden http://maps.apple.comLinks direkt in Apple Maps auf einem iOS-Gerät geöffnet oder auf andere Weise zu Google Maps umgeleitet (das dann auf einem Android-Gerät abgefangen wird), sodass Sie eine sorgfältige URL erstellen können, die in beiden Fällen das Richtige tut, indem Sie eine " Apple Maps "URL wie:

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

Alternativ können Sie eine Google Maps-URL direkt (ohne die /mapsURL-Komponente) verwenden, um direkt in Google Maps auf einem Android-Gerät oder im mobilen Web von Google Maps auf einem iOS-Gerät zu öffnen:

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

Ich bin gerade auf diese Frage gestoßen und habe hier alle Antworten gefunden. Ich habe einige der oben genannten Codes genommen und eine einfache JS-Funktion erstellt, die auf Android und iPhone funktioniert (sie unterstützt fast jedes Android und 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=');
    }
  }

Das HTML:

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

Dies funktioniert für mich auf allen Geräten [iOS, Android und Windows Mobile 8.1].

Sieht keineswegs nach dem besten Weg aus ... kann aber nicht einfacher sein :)

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

Nein, aus Sicht eines iOS-Entwicklers gibt es zwei Links, von denen ich weiß, dass sie die Maps-App auf dem iPhone öffnen

Unter iOS 5 und niedriger: http://maps.apple.com?q=xxxx

Unter iOS 6 und höher: http://maps.google.com?q=xxxx

Und das nur auf Safari. Chrome leitet Sie zur Google Maps-Webseite weiter.

Ansonsten müssen Sie ein URL-Schema verwenden, das den Zweck im Grunde übertrifft, da kein Android dieses Protokoll kennt.

Vielleicht möchten Sie wissen, warum Safari die Maps-App öffnet und Chrome mich auf eine Webseite weiterleitet.

Nun, denn Safari ist der eingebaute Browser von Apple und kann die obige URL erkennen. Chrome ist "nur eine weitere App" und muss dem iOS-Ökosystem entsprechen. Daher kann es nur mithilfe von URL-Schemata mit anderen Apps kommunizieren.

Einfache URL:

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

Diese URL ist spezifisch für das Routing.

Referenz: https://developers.google.com/maps/documentation/urls/guide#directions-action

Basierend auf der Dokumentation ist der originParameter optional und standardmäßig der Standort des Benutzers.

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

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

Für mich funktioniert das auf Desktop, IOS und Android.

Die URL-Syntax ist unabhängig von der verwendeten Plattform dieselbe

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

Unter Android oder iOS startet die URL Google Maps in der Maps-App. Wenn die Google Maps-App nicht installiert ist, startet die URL Google Maps in einem Browser und führt die angeforderte Aktion aus.

Auf jedem anderen Gerät startet die URL Google Maps in einem Browser und führt die angeforderte Aktion aus.

Hier ist der Link für die offizielle Dokumentation https://developers.google.com/maps/documentation/urls/guide

Ich fand, dass dies auf der ganzen Linie funktioniert:

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

Bei Desktops / Laptops muss der Benutzer beim Laden dieser Karte auf Wegbeschreibung klicken. Nach meinen Tests wird dieser Link jedoch von allen Mobilgeräten problemlos in die Google Maps-App geladen.