Comment créer un lien pour tous les appareils mobiles qui ouvre google maps avec un itinéraire commençant à l'emplacement actuel, en direction d'un lieu donné?

88

Je pensais plutôt que ce ne serait pas si difficile à trouver, mais apparemment, il n'est pas facile de trouver un article génial sur plusieurs appareils, comme vous vous en doutez.

Je souhaite créer un lien qui ouvre soit le navigateur de l'appareil mobile et surfe sur google maps OU ouvre une application Maps (Apple Maps ou Google Maps) et démarre directement un itinéraire, c'est-à-dire: commencer à l'emplacement actuel, finir à un point donné ( lat / long).

Je peux tester sur deux appareils (à côté du navigateur), un Android et un iPhone.

Le lien suivant ne fonctionne que sur Android:

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

En cliquant sur ce lien dans Chrome de l'iPhone, cela ouvre bizarrement Google Maps en version de bureau avec des annonces sur l'application mobile ...

Celui-ci ne fonctionne que sur iOS, ouvrant Apple Maps me demandant d'entrer un emplacement de départ (je peux choisir "Emplacement actuel") et démarrer l'itinéraire = comportement souhaité. Cliquer sur ce lien échoue complètement sur Android:

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

Remarquez les cartes: // protocole.

Existe-t-il une manière élégante de créer un tel lien entre appareils? Un lien qui fonctionne sur tous les principaux mobiles?

Merci

MISE À JOUR: Solution trouvée (un peu)

Voici ce que j'ai trouvé. Ce n'est pas tout à fait ce que j'imaginais, même si cela fonctionne.

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)

le maps://protocole est le schéma d'URL de l'application Apple Maps, qui ne commencera à fonctionner que sur ios 6 ou supérieur. Il existe des moyens de tester si gmaps est installé, puis de choisir quoi faire avec l'url, mais c'était un peu trop pour ce que je voulais. Je viens donc de créer un lien maps: // OU maps.google.com/, en utilisant les paramètres ci-dessus.

** MISE À JOUR **

malheureusement, $ .browser.device ne fonctionne pas depuis jquery 1.9 (source - http://api.jquery.com/jquery.browser )

android  html  ios  google-maps  mobile 
— Alex
source
1
Quelle langue côté serveur utilisez-vous? Vous pouvez résoudre ce problème avec le reniflage de l'agent utilisateur.
— Uooo le
Je sais que je pourrais, mais je veux faire ce navigateur croisé. J'ai PHP et JS
— Alex
@Alex - Comment traduisiez-vous cela pour travailler sur les ordinateurs de bureau? Cela maps.google.comfonctionne donc sur Android et Desktop, et maps:// sur iOS.
— kaoscify le
@Alex - J'obtiens toujours une erreur disant que a(la dernière ligne) n'est pas définie. J'ai une URL dans une infoWindow que j'ai besoin de changer en fonction de l'appareil utilisé.
— kaoscify le
1
J'ai trouvé qu'aucune des réponses ne permettait vraiment de détecter la plate-forme (pas le navigateur), j'ai donc trouvé PgwBrowser , un plugin jQuery qui détecte la plate-forme (par exemple, bureau, mobile), le navigateur et même le système d'exploitation. Son également> 2 Ko, lorsqu'il est compressé et gzippé. Avec lui, je peux simplement vérifier os.group dans une switchdéclaration et acheminer le navigateur en conséquence.
— filoxo

Réponses:

92

Euhmm, je n'ai pas beaucoup travaillé avec les téléphones, donc je ne sais pas si cela fonctionnerait, mais juste d'un point de vue html / javascript, pourriez-vous simplement ouvrir une URL différente en fonction de l'appareil de l'utilisateur?

<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
source
Vos réponses et celles d'Alex Pretzlav sont les plus proches qui ont fonctionné pour moi, mais la vôtre va davantage dans le sens de ce à quoi cela pourrait ressembler lors de l'utilisation de javascript, merci. Je mettrai à jour mon message pour fournir la solution finale
— Alex
1
J'ai beaucoup recherché cela il y a environ un an et je peux vous dire que l'utilisation de maps.apple.com/?q=Mexican+Restaurant redirigera vers la page google (essayez-la!) Et dans l'exception où c'est un appareil qui a l'application Apple Maps, elle ouvrira cette application à la place. Pour tout le reste, il ouvrira l'application / la page google maps. pls de prime.
— Worthy7
Plus précisément, ce que vous recherchez est la suivante: maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h Et la documentation est ici: developer.apple.com/library/content/featuredarticles/…
— Worthy7
@ Worthy7 apparemment, je n'ai pas testé, mais sur un Android, maps.apple.com/* redirigera vers le site Web de google maps, tandis que maps.google.com/* vous permettra de sélectionner une application native de cartes.
— James
Je recommande vivement d'utiliser cette réponse pour ouvrir l'application de carte utilisateur sur Android au lieu d'une nouvelle page de navigateur!
— PaulCo
23

Il est intéressant de noter que les http://maps.apple.comliens s'ouvriront directement dans Apple Maps sur un appareil iOS, ou seront redirigés vers Google Maps autrement (qui est ensuite intercepté sur un appareil Android), de sorte que vous pouvez créer une URL prudente qui fera la bonne chose dans les deux cas en utilisant un " URL d'Apple Maps "comme:

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

Vous pouvez également utiliser une URL Google Maps directement (sans le /mapscomposant URL) pour ouvrir directement dans Google Maps sur un appareil Android, ou ouvrir dans le Web mobile de Google Maps sur un appareil iOS:

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

— Alex Pretzlav
source
1
J'ai donc pris mon téléphone Android, ouvert le navigateur Web Google Chrome et entré l'URL http://maps.google.com/. Il vient d'ouvrir cette URL dans cette URL dans le navigateur Web. Je m'attendais à ce qu'il ouvre l' application Google Maps . Ai-je mal compris ce que vous avez écrit ici, Alex Pretzlav? ;-)
— Leo
3
@Leo Android gère les URL différemment lorsqu'elles sont entrées directement dans le navigateur et en cliquant sur un lien. Essayez de vous envoyer par e-mail une URL google maps comme maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA , puis appuyez dessus à partir de votre client de messagerie.
— Alex Pretzlav le
Merci @AlexPretzlav. Oui, ils ont du travail à faire là-bas pour mettre les choses ensemble. Existe-t-il des normes émergentes?
— Leo
1
Publier ceci en tant qu'URL afin que je puisse tester sur mon android maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA L'URL ci-dessus redirige vers google maps (le site Web) sur mon Android, alors que le maps.google.comme permet d'ouvrir un certain nombre d'applications de directions différentes sur mon téléphone Android.
— raphael le
14

je viens de heurter cette question et j'ai trouvé ici toutes les réponses.J'ai pris certains des codes ci-dessus et j'ai créé une fonction js simple qui fonctionne sur Android et iPhone (elle prend en charge presque tous les Android et 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=');
    }
  }

Le html: 

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

Cela fonctionne pour moi sur tous les appareils [iOS, Android et Windows Mobile 8.1].

Cela ne ressemble en aucun cas à la meilleure façon ... mais ne peut pas être plus 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
source
Très propre et facile. Testez sur plusieurs appareils. Fonctionne en douceur! Merci beaucoup: D
— lzoesch
Mais cela n'ouvre que les cartes Apple. Pas si cool si vous avez un téléphone Android.
— superluminaire
1
@Kristopher - Et cela ouvre l'application Google Maps?
— superluminaire
@superluminaire en effet, c'est curieusement le cas.
— Kristopher
Comment utiliseriez-vous cela pour transmettre une adresse au lieu de coordonnées?
— 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
source
1
c'est une façon vraiment cool de le faire, mais pas tout à fait ce que j'ai demandé. id veut plutôt simplement ajouter une balise d'ancrage, rien de plus. si ce n'est pas possible sans créer une carte google avec un itinéraire lui-même, c'est bon à savoir. merci quand même, vous obtenez un vote positif!
— Alex
Ok, laissez-moi savoir si vous obtenez une solution
— Sudharsun
2

Eh bien non, d'un développeur iOS potentiel, il y a deux liens que je connais qui ouvriront l'application Maps sur l'iPhone

Sur iOS 5 et versions antérieures: http://maps.apple.com?q=xxxx

Sur iOS 6 et plus: http://maps.google.com?q=xxxx

Et ce n'est que sur Safari. Chrome vous dirigera vers la page Web de Google Maps.

En dehors de cela, vous devrez utiliser un schéma d'URL qui dépasse fondamentalement l'objectif, car aucun Android ne connaîtra ce protocole.

Vous voudrez peut-être savoir pourquoi Safari ouvre l'application Maps et Chrome me dirige vers une page Web?

Eh bien, parce que safari est le navigateur intégré créé par Apple et peut détecter l'URL ci-dessus. Chrome est "juste une autre application" et doit être conforme à l'écosystème iOS. Par conséquent, le seul moyen de communiquer avec d'autres applications est d'utiliser des schémas d'URL.

— Segev
source
3
Eh bien, comme je l'ai dit, iOS détecte les cartes: // protocole et Android ouvre Maps directement via la position actuelle mais en utilisant une URL Google Maps commune, donc ce que vous avez dit n'est pas tout à fait exact ..
— Alex
1

D'après la documentation, le originparamètre est facultatif et par défaut, il correspond à l'emplacement de l'utilisateur.

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

Pour moi, cela fonctionne sur le bureau, IOS et Android.

— Koni
source
1

La syntaxe de l'URL est la même quelle que soit la plateforme utilisée

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

Sous Android ou iOS, l'URL lance Google Maps dans l'application Maps.Si l'application Google Maps n'est pas installée, l'URL lance Google Maps dans un navigateur et exécute l'action demandée.

Sur tout autre appareil, l'URL lance Google Maps dans un navigateur et exécute l'action demandée.

voici le lien vers la documentation officielle https://developers.google.com/maps/documentation/urls/guide

— Akshay Plus
source
0

J'ai trouvé que cela fonctionne dans tous les domaines:

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

Pour les ordinateurs de bureau / portables, l'utilisateur doit cliquer sur Itinéraire lorsque cette carte se charge, mais d'après mes tests, tous les appareils mobiles chargeront ce lien dans l'application Google Maps sans difficulté.

— Noakelstein
source
1
mais ce n'était pas la question :)
— Alex
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.