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&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&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 )
maps.google.comfonctionne donc sur Android et Desktop, etmaps://sur iOS.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é.switchdéclaration et acheminer le navigateur en conséquence.Réponses:
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]"); }la source
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+CAVous 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+CAla source
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? ;-)maps.google.comme permet d'ouvrir un certain nombre d'applications de directions différentes sur mon téléphone Android.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 + '&ll='; } else { window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&ll='); } }Le html:
<a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>la source
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
la source
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); } }); }); }la source
URL simple:
https://www.google.com/maps/dir/?api=1&destination=lat,lngCette URL est spécifique au routage.
Référence: https://developers.google.com/maps/documentation/urls/guide#directions-action
la source
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=xxxxSur iOS 6 et plus:
http://maps.google.com?q=xxxxEt 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.
la source
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=bicyclingPour moi, cela fonctionne sur le bureau, IOS et Android.
la source
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
la source
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é.
la source