Comment créer un lien pour tous les appareils mobiles qui s'ouvre google maps avec un itinéraire au départ de l'emplacement en cours, destinating un endroit donné?

Question

J'ai plutôt pensé que ce ne serait pas difficile à trouver, mais appearantly il n'est pas facile de trouver un super croix dispositif de l'article, comme vous le souhaitez.

Je veux créer un lien qui ouvre l'appareil mobile du navigateur et surfer sur google maps OU ouvrir une application maps (Apple Maps ou Google Maps) et directement de départ d'un itinéraire, c'est à dire: commencez à la position actuelle à la fin, à un moment donné (lat/long).

Je peux tester sur les 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 iPhone Chrome, cette bizarrement ouvre Google Maps en version de bureau avec les annonces sur l'application mobile...

Celle-ci ne fonctionne sur iOS, l'ouverture d'Apple Maps me demandant d'entrer un emplacement de départ (je peux le prendre "position Actuelle") et de commencer 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>

Avis de la maps:// protocole.

Est-il un élégant croix appareil de la création d'un tel lien? 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, mais ça 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)

l' maps:// protocole est le schéma d'url pour apple maps, qui va seulement commencer à travailler sur ios 6 ou supérieur. Il existe des moyens pour tester si gmaps est installé et puis de choisir quoi faire avec l'url, mais qui était un peu trop pour ce que je désirais. Donc j'ai juste fini la création d'un fonds de cartes:// OU maps.google.com/ lien, en utilisant les paramètres ci-dessus.

Answer 1

Uhmm, je n'ai pas beaucoup travaillé avec des téléphones, donc je ne sais pas si cela pourrait fonctionner, mais seulement à partir d'un code html/javascript point de vue pourriez-vous ouvrir une url différente selon ce que l'utilisateur de l'appareil?

<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>

function myNavFun(){
    // If it's an iPhone..
    if( (navigator.platform.indexOf("iPhone") != -1) 
        || (navigator.platform.indexOf("iPod") != -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=");
}

Answer 2

Il est intéressant de noter, http://maps.apple.com liens s'ouvrent directement dans l'Apple Maps sur un appareil iOS, ou de les rediriger vers Google Maps dans le cas contraire (qui est alors intercepté sur un appareil Android), de sorte que vous pouvez concevoir une attention URL qui va faire la bonne chose dans les deux cas à l'aide d'un "Apple Maps" URL de la forme:

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

Alternativement, vous pouvez utiliser une url Google Maps directement (sans l' /maps composant de l'URL) pour l'ouvrir directement dans Google Maps sur un appareil Android, ou l'ouvrir dans Google Maps Mobile Web sur un appareil iOS:

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

Answer 3

juste repoussé cette question et de trouver ici toutes les réponses J'ai pris quelques codes ci-dessus et simple de la fonction js qui fonctionne sur android et iphone (il prend en charge presque tous les android et iphone).

  function navigate(lng, lat) {
    // 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=');
    }
  }

Le code html:

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

Answer 4

Cela fonctionne pour moi sur tous les appareils [ iOS, Android et Mobile de Fenêtre 8.1 ].

Ne ressemble pas à la meilleure façon par tous les moyens... 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

Answer 5

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