web-dev-qa-db-fra.com

Comment créer un lien pour tous les appareils mobiles qui ouvre Google Maps avec un itinéraire partant de la position actuelle et se dirigeant vers un lieu donné?

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 le cross device, comme on peut s'y attendre.

Je veux créer un lien qui ouvre le navigateur de l'appareil mobile et surfer sur Google Maps OR ouvrir une application de cartes (Apple Maps ou Google Maps) et démarrer directement un itinéraire, par exemple: démarrer à l'emplacement actuel, se terminer à un point donné (lat/long).

Je peux tester sur deux appareils (à côté de browserstack), 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 étrangement Google Maps en version de bureau avec des annonces sur l'application mobile ...

Celui-ci ne fonctionne que sur iOS, ouvrant Apple Maps et me demandant de saisir un emplacement de départ (je peux choisir "Emplacement actuel") et démarrer la route = comportement souhaité. En cliquant sur ce lien échoue complètement sur Android:

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

Notez les maps: // protocol.

Existe-t-il un moyen élégant et croisé de créer un tel lien? Un seul lien qui fonctionne sur tous les principaux mobiles?

Merci

UPDATE: Solution trouvée (un peu)

Voici ce que je suis venu avec. Ce n'est pas tout à fait ce que j'ai imaginé, 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 protocole maps:// est le schéma d'URL de l'application Apple maps, qui ne fonctionnera 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 de cartes: // OR 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 )

androidhtmliosgoogle-mapsmobile
80
Alex

Uhmm, je n'ai pas beaucoup travaillé avec les téléphones, donc je ne sais pas si cela fonctionnerait, mais seulement d'un point de vue html/javascript, pourriez-vous simplement ouvrir une autre URL 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://maps.google.com/maps?daddr=lat,long&amp;ll=");
    else
         window.open("http://maps.google.com/maps?daddr=lat,long&amp;ll=");
}
80
James

Il est intéressant de noter que les liens http://maps.Apple.com s’ouvrent directement dans Apple Maps sur un appareil iOS, ou sont redirigés vers Google Maps (qui est ensuite intercepté sur un appareil Android), peut créer une URL soignée qui fera le bon choix dans les deux cas en utilisant une URL "Apple Maps" comme:

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

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

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

20
Alex Pretzlav

juste heurté dans cette question et trouvé ici toutes les réponses que j'ai pris quelques-uns des codes ci-dessus et fait simple fonction js qui fonctionne sur Android et iphone (il prend en charge presque tous les Android et 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=');
    }
  }

Le html:

 <a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>
11
talsibony

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

Ne ressemble en aucun cas à la meilleure solution ... mais ne peut ê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

9
deepakssn
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);
   }
 });
 });
 }
6
Sudharsun

Eh bien non, d'un développeur iOS prospectif, il existe deux liens qui ouvriront l'application Maps sur l'iPhone

Sur iOS 5 et inférieur: http://maps.Apple.com?q=xxxx

Sur iOS 6 et supérieur: 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 bat son sens, car aucun Android ne saura ce protocole.

Vous voudrez peut-être savoir pourquoi Safari ouvre l'application Maps et que 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 n'est "qu'une autre application" et doit être conforme à l'écosystème iOS. Par conséquent, le seul moyen de communiquer avec d'autres applications consiste à utiliser des schémas d'URL.

2
Segev

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

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

Dans 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 pour la documentation officielle https://developers.google.com/maps/documentation/urls/guide

1
Akshay More

Basé sur documentation , le paramètre Origin est optionnel et utilise par défaut 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.

1
Koni

URL simple:

https://www.google.com/maps/dir/?api=1&destination=lat,lng

Cette URL est spécifique pour le routage.

Référence: https://developers.google.com/maps/documentation/urls/guide#directions-action

1
Khurshid Ansari

J'ai trouvé que cela fonctionne à tous les niveaux:

<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 Directions lorsque la carte est chargée, mais tous mes appareils de test chargeront ce lien dans l'application Google Maps sans difficulté.

0
noakelstein