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?

86

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 )

Alex
quelle
1
Welche serverseitige Sprache verwenden Sie? Sie können dieses Problem mit dem Schnüffeln von Benutzeragenten lösen.
Uooo
Ich weiß, dass ich könnte, aber ich möchte diesen Cross-Browser machen. Ich habe PHP und JS
Alex
@Alex - Wie würden Sie dies auf Desktops übersetzen? Das maps.google.comfunktioniert also unter Android und Desktop sowie maps:// unter iOS.
Kaoscify
@Alex - Ich erhalte immer wieder die Fehlermeldung, dass a(die letzte Zeile) undefiniert ist. Ich habe eine URL in einem infoWindow, die ich je nach verwendetem Gerät ändern muss.
Kaoscify
1
Ich fand heraus, dass keine der Antworten wirklich gute Arbeit beim Erkennen der Plattform (nicht des Browsers) geleistet hat , und fand PgwBrowser , ein jQuery-Plugin, das Plattform (z. B. Desktop, Mobile), Browser und sogar Betriebssystem erkennt. Es ist auch> 2 KB, wenn komprimiert und gezippt. Damit kann ich einfach die os.group in einer switchAnweisung überprüfen und den Browser entsprechend weiterleiten .
Filoxo

Antworten:

90

Ä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]");
}
James
quelle
Ihre und Alex Pretzlavs Antworten sind die engsten, die für mich funktioniert haben, aber Ihre gehen mehr in die Richtung, wie es aussehen könnte, wenn Sie Javascript verwenden, danke. Ich werde meinen Beitrag aktualisieren, um die endgültige Lösung bereitzustellen
Alex
1
Ich habe dies vor ungefähr einem Jahr viel recherchiert und kann Ihnen sagen, dass die Verwendung von maps.apple.com/?q=Mexican+Restaurant zur Google-Seite umleitet (probieren Sie es aus!) Und in der Ausnahme, wo es sich um ein Gerät handelt, das über ein solches Gerät verfügt In der Apple Maps App wird diese App stattdessen geöffnet. Für alles andere wird die Google Maps App / Seite geöffnet. Kopfgeld pls.
Worthy7
Insbesondere suchen Sie Folgendes : maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h Und die Dokumentation finden Sie hier: developer.apple.com/library/content/featuredarticles/…
Worthy7
@ Worthy7 anscheinend habe ich nicht getestet, aber auf einem Android wird maps.apple.com/* auf die Google Maps-Website umgeleitet, während Maps.google.com/* Ihnen die Auswahl einer nativen Maps-App ermöglicht.
James
Ich würde empfehlen, diese Antwort zu verwenden, um die User Map-Anwendung auf Android anstelle einer neuen Browserseite zu öffnen!
PaulCo
23

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

Alex Pretzlav
quelle
1
Also nahm ich mein Android-Handy, öffnete den Google Chrome-Webbrowser und gab die URL ein http://maps.google.com/. Diese URL wurde gerade in dieser URL im Webbrowser geöffnet. Ich habe erwartet, dass die Google Maps-App geöffnet wird . Habe ich falsch verstanden, was Sie hier geschrieben haben, Alex Pretzlav? ;-)
Leo
3
@Leo Android behandelt URLs anders, wenn sie direkt im Browser eingegeben werden, als wenn Sie auf einen Link klicken. Versuchen Sie, sich eine Google Maps-URL wie maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA per E-Mail zu senden und dann von Ihrem E-Mail-Client aus darauf zu tippen.
Alex Pretzlav
Danke @AlexPretzlav. Ja, sie haben dort einen Job zu erledigen, um die Dinge zusammenzubringen. Gibt es neue Standards?
Leo
1
Wenn ich dies als URL poste, kann ich es auf meinem Android Maps testen.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA Die obige URL leitet zu Google Maps (der Website) auf meinem Android weiter, während das maps.google.comermöglicht es mir, eine Reihe von Richtungen Richtungen Apps auf meinem Android-Handy zu öffnen.
Raphael
12

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 + '&amp;ll=';
    }
    else {
      window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&amp;ll=');
    }
  }

Das HTML:

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

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

deepakssn
quelle
Sehr sauber und einfach. Test auf mehreren Geräten. Funktioniert reibungslos! Vielen Dank: D
lzoesch
Es werden jedoch nur Apfelkarten geöffnet. Nicht so cool, wenn Sie ein Android-Handy haben.
Superluminary
1
@Kristopher - Und es öffnet die Google Maps App?
Superluminary
@ Superluminary in der Tat tut es seltsamerweise.
Kristopher
Wie würden Sie dies verwenden, um eine Adresse anstelle von Koordinaten einzugeben?
Vincent
6
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);
   }
 });
 });
 }
Sudharsun
quelle
1
Das ist eine wirklich coole Art, aber nicht ganz das, wonach ich gefragt habe. Ich möchte lieber nur ein Ankertag hinzufügen, sonst nichts. Wenn es nicht möglich ist, ohne eine Google-Karte mit einer Route selbst zu erstellen, ist das gut zu wissen. Trotzdem danke, du bekommst eine positive Bewertung!
Alex
Ok, lassen Sie mich wissen, wenn Sie eine Lösung bekommen
Sudharsun
2

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.

Segev
quelle
3
Nun, wie gesagt, das iOS erkennt das Maps: // -Protokoll und Android öffnet Maps direkt über den aktuellen Standort, verwendet jedoch eine gemeinsame Google Maps-URL. Was Sie gesagt haben, ist also nicht ganz richtig.
Alex
1

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.

Koni
quelle
1

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

Akshay Mehr
quelle
0

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.

Noakelstein
quelle
1
aber das war nicht die frage :)
Alex