Come creare un collegamento per tutti i dispositivi mobili che apra google maps con un percorso che parte dalla posizione corrente, destinando un determinato luogo?

88

Pensavo piuttosto che non sarebbe stato così difficile da scoprire, ma apparentemente non è facile trovare un fantastico articolo cross-device, come ti aspetteresti.

Voglio creare un collegamento che apra il browser del dispositivo mobile e navighi su Google Maps OPPURE apra un'app di mappe (Apple Maps o Google Maps) e inizi direttamente un percorso, ovvero: inizia dalla posizione corrente, termina in un determinato punto ( lat / long).

Posso testare su due dispositivi (oltre a browserstack), un Android e un iPhone.

Il seguente collegamento funziona solo su Android:

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

Facendo clic su questo collegamento nel Chrome di iPhone, si apre stranamente Google Maps nella versione desktop con annunci sull'app mobile ...

Questo funziona solo su iOS, aprendo Apple Maps chiedendomi di inserire una posizione di partenza (posso scegliere "Posizione corrente") e avviare il percorso = comportamento desiderato. Fare clic su questo collegamento non riesce completamente su Android:

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

Notare il protocollo maps: //.

Esiste un modo elegante cross-device per creare un tale collegamento? Un collegamento che funziona su tutti i principali cellulari?

Grazie

AGGIORNAMENTO: Soluzione trovata (più o meno)

Ecco cosa ho trovato. Non è proprio quello che immaginavo, anche se funziona.

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)

il maps://protocollo è lo schema URL per l'app apple maps, che inizierà a funzionare solo su ios 6 o versioni successive. Esistono modi per verificare se gmaps è installato e quindi scegliere cosa fare con l'URL, ma era un po 'troppo per quello che intendevo. Quindi ho appena finito per creare un link maps: // OR maps.google.com/, utilizzando i parametri sopra.

** AGGIORNARE **

purtroppo, $ .browser.device non funziona da jquery 1.9 (fonte: http://api.jquery.com/jquery.browser )

android  html  ios  google-maps  mobile 
— Alex
fonte
1
Quale lingua lato server usi? È possibile risolvere questo problema con lo sniffing dell'agente utente.
— Uooo
So che potrei, ma voglio fare quel browser incrociato. Ho PHP e JS
— Alex
@Alex - Come lo traduresti in modo che funzioni sui desktop? Quindi maps.google.comfunziona su Android e desktop e maps:// su iOS.
— kaoscify
@Alex - Continuo a ricevere un errore che dice che a(l'ultima riga) non è definita. Ho un URL all'interno di una infoWindow che devo cambiare a seconda del dispositivo utilizzato.
— kaoscify
1
Ho scoperto che nessuna delle risposte ha fatto davvero un ottimo lavoro nel rilevare la piattaforma (non il browser), quindi ho trovato PgwBrowser , un plug-in jQuery che rileva la piattaforma (ad esempio desktop, mobile), browser e persino il sistema operativo. È anche> 2 KB, se compresso e compresso con gzip. Con esso, posso semplicemente controllare os.group in switchun'istruzione e instradare il browser di conseguenza.
— filoxo

Risposte:

92

Uhmm, non ho lavorato molto con i telefoni, quindi non so se funzionerebbe, ma solo dal punto di vista html / javascript potresti semplicemente aprire un URL diverso a seconda del dispositivo dell'utente?

<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
fonte
Le tue risposte e quelle di Alex Pretzlav sono le più vicine che hanno funzionato per me, ma la tua va più nella direzione di come potrebbe apparire quando si usa javascript, grazie. aggiornerò il mio post per fornire la soluzione finale
— Alex
1
Ho fatto molte ricerche su questo circa un anno fa e posso dirti che l'utilizzo di maps.apple.com/?q=Mexican+Restaurant reindirizzerà alla pagina google (provalo!) E nell'eccezione in cui è un dispositivo che ha l'app delle mappe di mele, aprirà invece quell'app. Per tutto il resto si aprirà l'app / pagina di google maps. bounty pls.
— Worthy7
Nello specifico quello che stai cercando è questo: maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h E la documentazione è qui: developer.apple.com/library/content/featuredarticles/…
— Worthy7
@ Worthy7 apparentemente, non l'ho provato, ma su un Android il maps.apple.com/* reindirizzerà al sito web di google maps, mentre maps.google.com/* ti permetterà di selezionare un'app nativa per le mappe.
— James
Consiglio vivamente di utilizzare questa risposta per aprire l'applicazione della mappa utente su Android invece di una nuova pagina del browser!
— PaulCo
23

È interessante notare che i http://maps.apple.comcollegamenti si apriranno direttamente in Apple Maps su un dispositivo iOS o reindirizzeranno a Google Maps in altro modo (che viene quindi intercettato su un dispositivo Android), quindi puoi creare un URL accurato che farà la cosa giusta in entrambi i casi utilizzando un " URL "di Apple Maps" come:

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

In alternativa, puoi utilizzare un URL di Google Maps direttamente (senza il /mapscomponente URL) per aprire direttamente in Google Maps su un dispositivo Android o aprire nel Web mobile di Google Maps su un dispositivo iOS:

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

— Alex Pretzlav
fonte
1
Quindi ho preso il mio telefono Android, ho aperto il browser Web Google Chrome e ho inserito l'URL http://maps.google.com/. Ha appena aperto questo URL in quell'URL nel browser web. Mi aspettavo che aprisse l' app Google Maps . Ho frainteso quello che hai scritto qui, Alex Pretzlav? ;-)
— Leone
3
@Leo Android gestisce gli URL in modo diverso quando vengono inseriti direttamente nel browser rispetto a fare clic su un collegamento. Prova a inviarti un'email a un URL di Google Maps come maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA e quindi a toccarlo dal tuo client di posta elettronica.
— Alex Pretzlav
Grazie @AlexPretzlav. Sì, hanno del lavoro da fare lì per mettere insieme le cose. Esistono standard emergenti?
— Leone
1
Pubblicando questo come URL in modo da poter testare sul mio android maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA L'URL sopra reindirizza a Google Maps (il sito web) sul mio Android, mentre il maps.google.commi consente di aprire una serie di app di indicazioni stradali diverse sul mio telefono Android.
— raphael
14

mi sono imbattuto in questa domanda e ho trovato qui tutte le risposte Ho preso alcuni dei codici sopra e ho creato una semplice funzione js che funziona su Android e iPhone (supporta quasi tutti gli Android e gli 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=');
    }
  }

L'html: 

 <a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>
— talsibony
fonte
10

Questo funziona per me su tutti i dispositivi [iOS, Android e Window Mobile 8.1].

Non sembra affatto il modo migliore ... ma non può essere più semplice :)

<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
fonte
Molto pulito e facile. Prova su più dispositivi. Funziona senza problemi! Grazie mille: D
— lzoesch
Ma apre solo le mappe delle mele. Non è così bello se hai un telefono Android.
— superluminario
1
@Kristopher - E apre l'app Google Maps?
— superluminario
@superluminary in effetti lo fa stranamente.
— Kristopher
Come useresti questo per passare un indirizzo invece delle coordinate?
— 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
fonte
1
questo è un modo davvero fantastico per farlo, ma non proprio quello che ho chiesto. id piuttosto voglio solo aggiungere un anchor-tag, niente di più. se non è possibile senza creare una mappa google con un percorso stesso, sarebbe bello saperlo. grazie comunque, ricevi un voto positivo!
— Alex
Ok fammi sapere se trovi una soluzione
— Sudharsun
2

Ebbene no, da un potenziale sviluppatore iOS, ci sono due collegamenti che so che apriranno l'app Maps su iPhone

Su iOS 5 e versioni precedenti: http://maps.apple.com?q=xxxx

Su iOS 6 e versioni successive: http://maps.google.com?q=xxxx

E questo è solo su Safari. Chrome ti indirizzerà alla pagina web di Google Maps.

Oltre a questo, dovrai utilizzare uno schema URL che sostanzialmente batte lo scopo perché nessun Android conoscerà quel protocollo.

Potresti voler sapere, perché Safari apre l'app Maps e Chrome mi indirizza a una pagina web?

Bene, perché Safari è il browser costruito da Apple e può rilevare l'URL sopra. Chrome è "solo un'altra app" e deve essere conforme all'ecosistema iOS. Pertanto l'unico modo per comunicare con altre app è utilizzare schemi URL.

— Segev
fonte
3
Bene, come ho detto, iOS rileva il protocollo maps: // e Android apre Maps direttamente tramite Current Location ma utilizzando un comune URL di Google Maps, quindi quello che hai detto non è del tutto corretto ..
— Alex
1

In base alla documentazione, il originparametro è facoltativo e il valore predefinito è la posizione dell'utente.

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

Per me funziona su desktop, IOS e Android.

— Koni
fonte
1

La sintassi dell'URL è la stessa indipendentemente dalla piattaforma in uso

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

In Android o iOS l'URL avvia Google Maps nell'app Maps, Se l'app Google Maps non è installata, l'URL avvia Google Maps in un browser ed esegue l'azione richiesta.

Su qualsiasi altro dispositivo, l'URL avvia Google Maps in un browser ed esegue l'azione richiesta.

ecco il link per la documentazione ufficiale https://developers.google.com/maps/documentation/urls/guide

— Akshay More
fonte
0

Ho scoperto che funziona su tutta la linea:

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

Per desktop / laptop l'utente deve fare clic su Indicazioni quando viene caricata la mappa, ma dai miei test tutti i dispositivi mobili caricheranno quel collegamento nell'app Google Maps senza difficoltà.

— noakelstein
fonte
1
ma non era questa la domanda :)
— Alex
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.