¿Cómo crear un enlace para todos los dispositivos móviles que abre google maps con una ruta que comienza en la ubicación actual, con destino a un lugar determinado?

88

Más bien pensé que esto no sería tan difícil de averiguar, pero aparentemente no es fácil encontrar un artículo increíble en varios dispositivos, como era de esperar.

Quiero crear un enlace que abra el navegador del dispositivo móvil y navegar a Google Maps O abrir una aplicación de mapas (Apple Maps o Google Maps) y comenzar directamente una ruta, es decir: comenzar en la ubicación actual, terminar en un punto determinado ( latitud longitud).

Puedo probar en dos dispositivos (además de la pila de navegadores), un Android y un iPhone.

El siguiente enlace solo funciona en Android:

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

Al hacer clic en este enlace en el Chrome del iPhone, esto abre extrañamente Google Maps en la versión de escritorio con anuncios en la aplicación móvil ...

Este solo funciona en iOS, abriendo Apple Maps pidiéndome que ingrese una ubicación de inicio (puedo elegir "Ubicación actual") e iniciar la ruta = comportamiento deseado. Hacer clic en este enlace falla completamente en Android:

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

Observe el protocolo maps: //.

¿Existe una forma elegante de varios dispositivos de crear dicho vínculo? ¿Un enlace que funcione en todos los móviles principales?

Gracias

ACTUALIZACIÓN: Solución encontrada (un poco)

Esto es lo que se me ocurrió. No es exactamente lo que imaginaba, aunque está funcionando.

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)

el maps://protocolo es el esquema de URL para la aplicación de mapas de Apple, que solo comenzará a funcionar en iOS 6 o superior. Hay formas de probar si gmaps está instalado y luego elegir qué hacer con la URL, pero eso fue demasiado para lo que pretendía. Así que acabé creando un enlace maps: // O maps.google.com/, usando los parámetros anteriores.

** ACTUALIZAR **

lamentablemente, $ .browser.device no funciona desde jquery 1.9 (fuente - http://api.jquery.com/jquery.browser )

android  html  ios  google-maps  mobile 
— Alex
fuente
1
¿Qué idioma del lado del servidor usas? Puede resolver este problema con el rastreo de agentes de usuario.
— Uooo
Sé que podría, pero quiero hacer ese navegador cruzado. Tengo PHP y JS
— Alex
@Alex - ¿Cómo traduciría esto para trabajar en escritorios? Entonces eso maps.google.comfunciona en Android y Desktop, y maps:// en iOS.
— kaoscify
@Alex: sigo recibiendo un error que dice que a(la última línea) no está definida. Tengo una URL dentro de una ventana de información que necesito cambiar según el dispositivo utilizado.
— kaoscify
1
Descubrí que ninguna de las respuestas realmente hizo un gran trabajo al detectar la plataforma (no el navegador), así que encontré PgwBrowser , un complemento de jQuery que detecta la plataforma (por ejemplo, escritorio, móvil), navegador e incluso sistema operativo. También es> 2 KB, cuando está comprimido y comprimido con gzip. Con él, simplemente puedo verificar el grupo os.group en una switchdeclaración y enrutar el navegador en consecuencia.
— filoxo

Respuestas:

92

Uhmm, no he trabajado mucho con teléfonos, así que no sé si esto funcionaría, pero solo desde un punto de vista html / javascript, ¿podrías abrir una URL diferente dependiendo de cuál sea el dispositivo del usuario?

<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
fuente
Tus respuestas y las de Alex Pretzlav son las más cercanas a mí, pero la tuya va más en la dirección de cómo podría verse al usar javascript, gracias. Actualizaré mi publicación para proporcionar la solución final
— Alex
1
Investigué mucho sobre esto hace aproximadamente un año y puedo decirte que usar maps.apple.com/?q=Mexican+Restaurant te redireccionará a la página de Google (¡pruébalo!) la aplicación de mapas de Apple, la abrirá en su lugar. Para todo lo demás, abrirá la aplicación / página de Google Maps. recompensa por favor.
— Worthy7
Específicamente, lo que está buscando es: maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h Y la documentación está aquí: developer.apple.com/library/content/featuredarticles/…
— Worthy7
@ Worthy7 aparentemente, no lo he probado, pero en un Android, maps.apple.com/* redirigirá al sitio web de Google Maps, mientras que maps.google.com/* te permitirá seleccionar una aplicación de mapas nativa.
— James
¡Recomendaría usar esta respuesta para abrir la aplicación de mapas de usuario en Android en lugar de una nueva página del navegador!
— PaulCo
23

Curiosamente, los http://maps.apple.comenlaces se abrirán directamente en Apple Maps en un dispositivo iOS o, de lo contrario, se redirigirán a Google Maps (que luego se interceptará en un dispositivo Android), por lo que puede crear una URL cuidadosa que hará lo correcto en ambos casos usando un URL de Apple Maps como:

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

Alternativamente, puede usar una URL de Google Maps directamente (sin el /mapscomponente de URL) para abrir directamente en Google Maps en un dispositivo Android, o abrir en la Web móvil de Google Maps en un dispositivo iOS:

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

— Alex Pretzlav
fuente
1
Así que tomé mi teléfono Android, abrí el navegador web Google Chrome e ingresé la URL http://maps.google.com/. Simplemente abrió esta URL en esa URL en el navegador web. Esperaba que abriera la aplicación Google Maps . ¿Entendí mal lo que escribiste aquí, Alex Pretzlav? ;-)
— Leo
3
@Leo Android maneja las URL de manera diferente cuando se ingresan directamente en el navegador frente a hacer clic en un enlace. Intente enviarse por correo electrónico una URL de Google Maps como maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA y luego puntee en ella desde su cliente de correo electrónico.
— Alex Pretzlav
Gracias @AlexPretzlav. Sí, tienen un trabajo que hacer allí para arreglar las cosas. ¿Existen estándares emergentes?
— Leo
1
Publicando esto como una URL para poder probar en mi android maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA La URL anterior redirige a Google Maps (el sitio web) en mi Android, mientras que la maps.google.comme permite abrir varias aplicaciones de direcciones diferentes en mi teléfono Android.
— raphael
14

Simplemente me topé con esta pregunta y encontré aquí todas las respuestas. Tomé algunos de los códigos anteriores e hice una función simple de js que funciona en Android y iPhone (es compatible con casi todos los Android y 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=');
    }
  }

El html: 

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

Esto me funciona en todos los dispositivos [iOS, Android y Windows Mobile 8.1].

No parece la mejor manera de ninguna manera ... pero no puede ser más simple :)

<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
fuente
Muy limpio y fácil. Prueba en varios dispositivos. Funciona sin problemas. Muchas gracias: D
— lzoesch
Pero solo abre mapas de Apple. No es tan bueno si tienes un teléfono Android.
— superluminario
1
@Kristopher - ¿Y abre la aplicación de mapas de Google?
— superluminario
@superluminario de hecho, extrañamente lo hace.
— Kristopher
¿Cómo usarías esto para pasar una dirección en lugar de coordenadas?
— 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
fuente
1
Esa es una forma genial de hacerlo, pero no es exactamente lo que pedí. id más bien solo quiero agregar una etiqueta de anclaje, nada más. Si no es posible sin crear un mapa de Google con una ruta, sería bueno saberlo. gracias de todos modos, ¡obtienes un voto a favor!
— Alex
Ok, avísame si tienes una solución
— Sudharsun
2

Bueno, no, de un posible desarrollador de iOS, hay dos enlaces que conozco que abrirán la aplicación Mapas en el iPhone.

En iOS 5 y versiones anteriores: http://maps.apple.com?q=xxxx

En iOS 6 y posteriores: http://maps.google.com?q=xxxx

Y eso es solo en Safari. Chrome lo dirigirá a la página web de Google Maps.

Aparte de eso, deberá usar un esquema de URL que básicamente supere el propósito porque ningún Android conocerá ese protocolo.

Es posible que desee saber, ¿Por qué Safari abre la aplicación Mapas y Chrome me dirige a una página web?

Bueno, porque Safari es el navegador integrado creado por Apple y puede detectar la URL anterior. Chrome es "solo otra aplicación" y debe cumplir con el ecosistema iOS. Por lo tanto, la única forma de comunicarse con otras aplicaciones es mediante el uso de esquemas de URL.

— Segev
fuente
3
Bueno, como dije, iOS detecta el protocolo maps: // y Android abre Maps directamente a través de la ubicación actual pero usando una URL común de Google Maps, así que lo que has dicho no es del todo correcto.
— Alex
1

Según la documentación, el originparámetro es opcional y por defecto es la ubicación del usuario.

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

Para mí, esto funciona en Desktop, IOS y Android.

— Koni
fuente
1

La sintaxis de la URL es la misma independientemente de la plataforma en uso

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

En Android o iOS, la URL inicia Google Maps en la aplicación Maps. Si la aplicación Google Maps no está instalada, la URL inicia Google Maps en un navegador y realiza la acción solicitada.

En cualquier otro dispositivo, la URL inicia Google Maps en un navegador y realiza la acción solicitada.

aquí está el enlace para la documentación oficial https://developers.google.com/maps/documentation/urls/guide

— Akshay Más
fuente
0

Descubrí que esto funciona en todos los ámbitos:

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

Para computadoras de escritorio / portátiles, el usuario tiene que hacer clic en Indicaciones cuando se carga el mapa, pero a partir de mis pruebas, todos los dispositivos móviles cargarán ese enlace en la aplicación Google Maps sin dificultad.

— Noakelstein
fuente
1
pero esa no era la pregunta :)
— Alex
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.