How to create a link for all mobile devices that open Google maps with a route starting from the current location that defines this place?

Question

I rather thought that it would not be so difficult to find, but it seems not easy to find an awesome cross-device article, as you would expect.

I want to create a link that opens either a mobile browser, or surfing on Google maps, or open a map application (Apple Maps or Google Maps) and start the route directly, that is: start from the current location, (lat / long).

I can test on two devices (next to the browser), Android and iPhone.

The following link only works on Android:

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

By clicking this link in iPhone Chrome, it strangely opens Google Maps in the desktop version with ads in the mobile application ...

This only works on iOS, opening Apple Maps, prompting me to enter the starting location (I can select "Current Location") and start the route = desired behavior. Clicking this link completely failed on Android:

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

Pay attention to the maps: // protocol.

Is there an elegant way to cross-device to create such a link? One link that works on all major mobile phones

thank

UPDATE: solution found (kinda)

Here is what I came up with. This is not exactly what I imagined, although it works.

 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) 

The maps:// protocol is a URL scheme for the apple maps application, which will only work on ios 6 or higher. There are ways to check if gmaps is installed, and then choose what to do with the URL, but that was too much for what I intended. So I just created a map: // OR maps.google.com/ using the above options.

** UPDATE **

Unfortunately, $ .browser.device does not work since jquery 1.9 (source - http://api.jquery.com/jquery.browser )

Answer 1

Umm, I didn’t work very much with phones, so I don’t know if this will work, but only from the point of view of html / javascript could you just open a different URL depending on what the user device is?

 <a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a> function myNavFunc(){ // If it 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="); } 

Answer 2

Interestingly, http://maps.apple.com links will either open directly on Apple Maps on an iOS device or redirect to Google Maps otherwise (which is then intercepted on an Android device), so you can create a thorough URL that will do the right thing in both cases using the "Apple Maps" URL, for example:

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

Alternatively, you can directly use the Google Maps URL (without the /maps component) to open directly in Google Maps on an Android device or open in Google Mobile Mobile on an iOS device:

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

Answer 3

just stumbled upon this question and found all the answers here I took some of the codes above and made a simple JS function that works on Android and iPhone (it supports almost all Android and iPhone).

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

HTML:

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

Answer 4

This works for me on all devices [iOS, Android and Window Mobile 8.1].

It doesn't seem like the best way by any means ... but it couldn't be easier :)

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

Answer 6

Well, no, from a promising iOS developer, there are two links that I know about, it will open the Maps application on the iPhone

On iOS 5 and below: http://maps.apple.com?q=xxxx

On iOS 6 and above: http://maps.google.com?q=xxxx

And this is only on Safari. Chrome will direct you to the Google Maps webpage.

In addition, you will need to use a URL scheme that basically surpasses the goal, because none of them will know this protocol.

You might be wondering why Safari opens the Maps app and Chrome directs me to a webpage?

Good, because safari is a browser build made by an apple and can determine the URL above. Chrome is “just another application” and must match the iOS ecosystem. Therefore, the only way to communicate with other applications is to use URL schemes.

Answer 7

Based on the documentation, the origin parameter is optional and, by default, it corresponds to the user's location.

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

For me, this works on Desktop, iOS and Android.

Answer 8

The syntax of the URL is the same regardless of the platform used.

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

On Android or iOS, the URL launches Google Maps in the Maps application. If the Google Maps application is not installed, the URL launches Google Maps in a browser and performs the requested action.

On any other device, the URL launches Google Maps in a browser and performs the requested action.

here is a link to the official documentation https://developers.google.com/maps/documentation/urls/guide

Answer 9

Simple URL:

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

This URL is for routing purposes.

Link: https://developers.google.com/maps/documentation/urls/guide#directions-action

Answer 10

I found that this works in all directions:

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

For desktop / laptop computers, the user must click Directions when this map loads, but from my testing all mobile devices will download this link in the Google Maps application without difficulty.