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&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&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 )
maps.google.comfunciona en Android y Desktop, ymaps://en iOS.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.switchdeclaración y enrutar el navegador en consecuencia.Respuestas:
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]"); }fuente
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+CAAlternativamente, 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+CAfuente
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? ;-)maps.google.comme permite abrir varias aplicaciones de direcciones diferentes en mi teléfono Android.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 + '&ll='; } else { window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&ll='); } }El html:
<a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>fuente
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
fuente
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); } }); }); }fuente
URL simple:
https://www.google.com/maps/dir/?api=1&destination=lat,lngEsta URL es específica para el enrutamiento.
Referencia: https://developers.google.com/maps/documentation/urls/guide#directions-action
fuente
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=xxxxEn iOS 6 y posteriores:
http://maps.google.com?q=xxxxY 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.
fuente
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=bicyclingPara mí, esto funciona en Desktop, IOS y Android.
fuente
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
fuente
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.
fuente