una studio ruta programacion por para móviles libro google edición desarrollo curso compartir como aplicaciones android html ios google-maps mobile

studio - manual de programacion android pdf



¿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 y destina un lugar determinado? (8)

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

Pensé que esto no sería tan difícil de descubrir, pero aparentemente no es fácil encontrar un artículo increíble de dispositivos cruzados, como es 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, finalizar en un punto determinado ( latitud longitud).

Puedo probar en dos dispositivos (al lado de browserstack), un Android y un iPhone.

El siguiente enlace funciona solo 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 Chrome de iPhone, esto extrañamente abre Google Maps en la versión de escritorio con anuncios en la aplicación móvil ...

Este solo funciona en iOS, abre Apple Maps y me pide que ingrese una ubicación de inicio (puedo elegir "Ubicación actual") y comienzo la ruta = comportamiento deseado. Al 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 los mapas: // protocolo.

¿Existe una forma elegante de crear una conexión de este tipo? ¿Un enlace que funciona 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 imaginé, 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 protocolo maps:// es el esquema de URL para la aplicación de mapas de manzana, 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 terminé creando un enlace maps: // OR maps.google.com/, usando los parámetros anteriores.

** ACTUALIZACIÓN **

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


Bueno, no, de un desarrollador prospectivo 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 versiones posteriores: http://maps.google.com?q=xxxx

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

Aparte de eso, necesitarás usar un esquema de URL que básicamente supera 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 la compilación en el navegador hecho por Apple y puede detectar la URL anterior. Chrome es "solo otra aplicación" y debe cumplir con el Ecosistema de iOS. Por lo tanto, la única forma de comunicarse con otras aplicaciones es mediante el uso de esquemas de URL.


Curiosamente, los enlaces de http://maps.apple.com se abrirán directamente en Apple Maps en un dispositivo iOS, o redirigirán a Google Maps de otra forma (que luego se intercepta en un dispositivo Android), por lo que puede crear una URL cuidadosa que hará lo correcto en ambos casos usando una 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 componente /maps 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


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 debe hacer clic en Direcciones cuando se carga ese mapa, pero según mis pruebas, todos los dispositivos móviles cargarán ese enlace en la aplicación Google Maps sin dificultad.


Esto funciona para mí en todos los dispositivos [iOS, Android y Window 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


Según la documentation el parámetro de origin es opcional y se establece de manera predeterminada en 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....

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


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


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); } }); }); }