it-swarm.com.de

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

Ich dachte eher, das wäre nicht so schwer herauszufinden, aber anscheinend ist es nicht einfach, einen großartigen Cross-Device-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 navigiert OR eine Karten-App (Apple Maps oder Google Maps) öffnen und direkt eine Route starten, dh: Start am Aktueller Standort, Ende an einem bestimmten Punkt (Lat/Long).

Ich kann auf zwei Geräten (neben 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 iPhone Chrome wird Google Maps in der Desktop-Version mit Anzeigen auf der mobilen App auf seltsame Weise geöffnet ...

Dieser funktioniert nur unter iOS und öffnet Apple Maps fordert mich auf, einen Startort einzugeben (ich kann "Aktueller Standort" auswählen) und die Route starten = gewünschtes Verhalten. 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 die Maps: // Protokoll.

Gibt es eine elegante geräteübergreifende Möglichkeit, eine solche Verknüpfung zu erstellen? Ein Link, der auf allen Hauptmobilen 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:// protocol ist das URL-Schema für die Apple maps App, die erst ab ios 6 funktioniert. Es gibt Möglichkeiten, zu testen, ob gmaps installiert ist und dann auszuwählen, was mit gmaps geschehen soll url, aber das war etwas zu viel für das, was ich beabsichtigt hatte. Also habe ich gerade eine Karte erstellt: // OR maps.google.com/ link, unter Verwendung der obigen Parameter.

** UPDATE **

leider funktioniert $. browser.device seit jquery 1.9 nicht mehr (source - http://api.jquery.com/jquery.browser )

80
Alex

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

<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://maps.google.com/maps?daddr=lat,long&amp;ll=");
    else
         window.open("http://maps.google.com/maps?daddr=lat,long&amp;ll=");
}
80
James

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

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

Alternativ können Sie eine Google Maps-URL direkt verwenden (ohne /maps URL-Komponente) zum direkten Öffnen in Google Maps auf einem Android Gerät oder zum Öffnen im mobilen Web von Google Maps auf einem iOS-Gerät:

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

20
Alex Pretzlav

ich bin gerade auf diese Frage gestoßen und habe hier alle Antworten gefunden. Ich habe einige der obigen Codes genommen und eine einfache js - Funktion erstellt, die auf Android und iphone (es unterstützt fast alle Android und iphones).

  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>
11
talsibony

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

Sieht auf keinen Fall wie der beste aus ... aber einfacher geht es nicht :)

<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

9
deepakssn
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);
   }
 });
 });
 }
6
Sudharsun

Nein, von einem zukünftigen iOS-Entwickler 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

Ab iOS 6: 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 Android dieses Protokoll nicht kennt.

Vielleicht möchten Sie wissen, warum Safari die Maps-App öffnet und Chrome mich zu einer Webseite leitet?

Nun, weil Safari der eingebaute Browser von Apple ist und die obige URL erkennen kann. Chrome ist "nur eine andere App" und muss dem iOS-Ökosystem entsprechen. Die einzige Möglichkeit, mit anderen Apps zu kommunizieren, ist die Verwendung von URL-Schemata.

2
Segev

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

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

In 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 zur offiziellen Dokumentation https://developers.google.com/maps/documentation/urls/guide

1
Akshay More

Basierend auf Dokumentation ist der Parameter Origin optional und standardmäßig auf den Speicherort des Benutzers eingestellt.

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

Bei mir funktioniert das auf Desktop, IOS und Android.

1
Koni

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

1
Khurshid Ansari

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 der Karte auf Wegbeschreibungen klicken. Nach meinem Test wird dieser Link jedoch von allen Mobilgeräten problemlos in die Google Maps-App geladen.

0
noakelstein