Como criar um link para todos os dispositivos móveis que abre o google maps com uma rota a partir da localização atual, com destino a um determinado lugar?

89

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&amp;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&amp;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 )

android  html  ios  google-maps  mobile 
— Alex
fonte
1
Qual linguagem do lado do servidor você usa? Você pode resolver esse problema com a detecção de agente de usuário.
— Uooo
Eu sei que poderia, mas quero fazer aquele navegador cruzado. Tenho PHP e JS
— Alex
@Alex - Como você traduziria isso para o trabalho em desktops? Isso maps.google.comfunciona no Android e Desktop e maps:// no iOS.
— Kaoscify
@Alex - Continuo recebendo um erro dizendo a(a última linha) está indefinida. Eu tenho um URL dentro de uma infoWindow que preciso alterar dependendo do dispositivo usado.
— Kaoscify
1
Descobri que nenhuma das respostas realmente fez um bom trabalho na detecção da plataforma (não do navegador), então encontrei o PgwBrowser , um plugin jQuery que detecta plataforma (por exemplo, desktop, celular), navegador e até mesmo sistema operacional. Também é> 2 KB, quando compactado e gzipado. Com ele, posso simplesmente verificar o os.group em uma switchinstrução e rotear o navegador de acordo.
— filoxo

Respostas:

94

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]");
}
— James
fonte
Suas respostas e de Alex Pretzlav são as mais próximas que funcionaram para mim, mas as suas vão mais na direção de como ficariam ao usar javascript, obrigado. atualizarei minha postagem para fornecer a solução final
— Alex,
1
Pesquisei muito sobre isso há cerca de um ano e posso dizer que usar maps.apple.com/?q=Mexican+Restaurant irá redirecionar para a página do Google (experimente!) E na exceção onde é um dispositivo que tem o app apple maps, ele abrirá esse app. Para todo o resto, ele abrirá o aplicativo / página do google maps. bounty pls.
— Worthy7 de
Especificamente, o que você está procurando é: maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h E a documentação está aqui: developer.apple.com/library/content/featuredarticles/…
— Worthy7
@ Worthy7 aparentemente, não testei, mas em um Android o maps.apple.com/* redirecionará para o site do google maps, enquanto maps.google.com/* permitirá que você selecione um aplicativo de mapas nativo.
— James
Eu recomendo usar esta resposta para abrir o aplicativo de mapa do usuário no Android em vez de uma nova página do navegador!
— PaulCo
24

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+CA

Como 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+CA

— Alex Pretzlav
fonte
1
Peguei meu telefone Android, abri o navegador Google Chrome e digitei o URL 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? ;-)
— Leo,
3
@Leo Android lida com URLs de maneira diferente quando inseridos diretamente no navegador em vez de clicar em um link. Tente enviar a si mesmo por e-mail um URL do google maps como maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA e toque nele no seu cliente de e-mail.
— Alex Pretzlav
Obrigado @AlexPretzlav. Sim, eles têm algum trabalho a fazer lá para organizar as coisas. Existem padrões emergentes?
— Leo,
1
Postando isso como um URL para que eu possa testar em meu android maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA O URL acima redireciona para google maps (o site) no meu android, enquanto o maps.google.compermite-me abrir uma série de aplicativos de direções diferentes no meu telefone Android.
— raphael
15

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

O html: 

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

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

— Deepakssn
fonte
Muito limpo e fácil. Teste em vários dispositivos. Funciona sem problemas! Muito obrigado: D
— lzoesch
Mas ele só abre mapas da apple. Não é tão legal se você tiver um telefone Android.
— superluminário de
1
@Kristopher - E ele abre o aplicativo Google Maps?
— superluminário de
@superluminary, de fato, estranhamente.
— Kristopher de
Como você usaria isso para passar um endereço em vez 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
fonte
1
essa é uma maneira muito legal de fazer isso, mas não é bem o que eu pedi. em vez disso, apenas deseja adicionar uma tag âncora, nada mais. se não for possível sem criar um mapa do google com uma rota própria, seria bom saber. Obrigado de qualquer forma, você ganha um voto positivo!
— Alex de
Ok, deixe-me saber se você conseguir uma solução
— Sudharsun
2

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=xxxx

No iOS 6 e superior: http://maps.google.com?q=xxxx

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

— Segev
fonte
3
Bem, como eu disse, o iOS detecta o protocolo maps: // e o Android abre o Maps diretamente via Current Location, mas usando uma URL comum do Google Maps, então o que você disse não está certo.
— Alex
1

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=bicycling

Para mim, isso funciona no Desktop, IOS e Android.

— Koni
fonte
1

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

— Akshay More
fonte
0

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.

— Noakelstein
fonte
1
mas essa não era a questão :)
— Alex
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.