Eu pensei que isso não seria tão difícil de descobrir, mas aparentemente não é fácil encontrar um artigo incrível para vários dispositivos, como você esperava.
Desejo criar um link que abra o navegador do dispositivo móvel e navegue no google maps OU abra um aplicativo de mapas (Apple Maps ou Google Maps) e inicie diretamente uma rota, ou seja: comece na localização atual, termine em um determinado ponto ( lat / long).
Posso testar em dois dispositivos (ao lado da pilha de navegadores), um Android e um iPhone.
O seguinte link funciona apenas no Android:
<a href="http://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
Clicar neste link no Chrome do iPhone, estranhamente abre o Google Maps na versão para desktop com anúncios no aplicativo móvel ...
Este só funciona no iOS, abrindo Apple Maps pedindo-me para inserir um local de início (posso escolher "Local Atual") e iniciar a rota = comportamento desejado. Clicar neste link falha completamente no Android:
<a href="maps://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
Observe o protocolo maps: //.
Existe uma maneira elegante de dispositivo cruzado de criar tal link? Um link que funciona em todos os principais celulares?
obrigado
ATUALIZAÇÃO: solução encontrada (meio)
Aqui está o que eu descobri. Não é bem o que eu imaginei, embora esteja 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)
o maps://protocolo é o esquema de url para o aplicativo apple maps, que só começará a funcionar no ios 6 ou superior. Existem maneiras de testar se o gmaps está instalado e, em seguida, escolher o que fazer com a url, mas isso foi demais para o que eu pretendia. Então, acabei criando um link maps: // OR maps.google.com/, usando os parâmetros acima.
** ATUALIZAÇÃO **
infelizmente, $ .browser.device não funciona desde jquery 1.9 (fonte - http://api.jquery.com/jquery.browser )
maps.google.comfunciona no Android e Desktop emaps://no iOS.a(a última linha) está indefinida. Eu tenho um URL dentro de uma infoWindow que preciso alterar dependendo do dispositivo usado.switchinstrução e rotear o navegador de acordo.Respostas:
Uhmm, eu não trabalhei muito com telefones, então não sei se isso funcionaria, mas apenas do ponto de vista html / javascript, você poderia simplesmente abrir um url diferente dependendo do dispositivo do usuário?
<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]"); }fonte
Curiosamente, os
http://maps.apple.comlinks abrirão diretamente no Apple Maps em um dispositivo iOS ou redirecionarão para o Google Maps (que é então interceptado em um dispositivo Android), para que você possa criar um URL cuidadoso que fará a coisa certa em ambos os casos usando um " URL do Apple Maps "como:http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CAComo alternativa, você pode usar um url do Google Maps diretamente (sem o
/mapscomponente de URL) para abrir diretamente no Google Maps em um dispositivo Android ou abrir na Web móvel do Google Maps em um dispositivo iOS:http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CAfonte
http://maps.google.com/. Ele acabou de abrir esse URL naquele URL no navegador da web. Eu esperava que ele abrisse o aplicativo Google Maps . Eu entendi mal o que você escreveu aqui, Alex Pretzlav? ;-)maps.google.compermite-me abrir uma série de aplicativos de direções diferentes no meu telefone Android.apenas esbarrei nessa questão e encontrei aqui todas as respostas. Peguei alguns dos códigos acima e fiz uma função js simples que funciona no android e iphone (suporta quase todos os android e 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 + '&ll='; } else { window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&ll='); } }O html:
<a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>fonte
Isso funciona para mim em todos os dispositivos [iOS, Android e Windows Mobile 8.1].
Não parece a melhor maneira de forma alguma ... mas não pode ser mais simples :)
<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
fonte
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); } }); }); }fonte
URL simples:
https://www.google.com/maps/dir/?api=1&destination=lat,lngEste url é específico para roteamento.
Referência: https://developers.google.com/maps/documentation/urls/guide#directions-action
fonte
Bem, não, de um potencial desenvolvedor iOS, há dois links que eu conheço que abrirão o aplicativo Maps no iPhone
No iOS 5 e inferior:
http://maps.apple.com?q=xxxxNo iOS 6 e superior:
http://maps.google.com?q=xxxxE isso só no Safari. O Chrome irá direcioná-lo para a página da web do Google Maps.
Além disso, você precisará usar um esquema de URL que basicamente supere o objetivo, porque nenhum Android conhecerá esse protocolo.
Você pode querer saber, por que o Safari abre o aplicativo Maps e o Chrome me direciona para uma página da web?
Bem, porque safari é a construção do navegador feita pela apple e pode detectar a URL acima. O Chrome é "apenas mais um aplicativo" e deve estar em conformidade com o ecossistema iOS. Portanto, a única maneira de se comunicar com outros aplicativos é usando esquemas de URL.
fonte
Com base na documentação, o
originparâmetro é opcional e o padrão é a localização do usuário.... 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 mim, isso funciona no Desktop, IOS e Android.
fonte
A sintaxe do URL é a mesma, independentemente da plataforma em uso
String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+ longitude;No Android ou iOS, o URL inicia o Google Maps no aplicativo Maps. Se o aplicativo Google Maps não estiver instalado, o URL inicia o Google Maps em um navegador e executa a ação solicitada.
Em qualquer outro dispositivo, o URL inicia o Google Maps em um navegador e executa a ação solicitada.
aqui está o link para a documentação oficial https://developers.google.com/maps/documentation/urls/guide
fonte
Descobri que isso funciona em todos os aspectos:
<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>Para desktops / laptops, o usuário deve clicar em Direções quando o mapa for carregado, mas, de acordo com meus testes, todos os dispositivos móveis carregarão esse link no aplicativo Google Maps sem dificuldade.
fonte