How to create a link for all mobile devices that opens google maps with a route starting at the current location destinating a given place

Question

I rather thought this would not be so hard to find out but appearantly it is not easy to find an awesome cross device article  like you d expect   I want to create a link which opens either the mobile device s browser and surf to google maps OR open a maps app  Apple Maps or Google Maps  and directly starting a route  i e   start at the current location  end at a given point  lat long    I can test on two devices  beside browserstack   an Android and an iPhone   The following link works only on the Android    lt a href  http   maps google com maps daddr lat long amp amp ll   gt Take me there  lt  a gt    Clicking this link in iPhone s Chrome  this weirdly opens Google Maps in desktop version with ads on the mobile app     This one only works on iOS  opening Apple Maps asking me to enter a start location  i can pick  Current Location   and start the route   desired behavior  Clicking this link completely fails on Android      lt a href  maps   maps google com maps daddr lat long amp amp ll   gt Take me there  lt  a gt   Notice the maps    protocol   Is there an elegant cross device way of creating such a link  One link that works on all main mobiles   Thanks  UPDATE  Solution found  kinda   Here is what I ve come up with  It s not quite what I imagined  though it s working   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   lt http   bit  ly TJjs1V gt                  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   gt   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 the url scheme for the apple maps app  which will only start working on ios 6 or higher  There are ways to test if gmaps is installed and then chose what to do with the url  but that was kind of too much for what I intended  So i just ended up creating a maps    OR maps google com  link  using the above parameters      UPDATE     sadly    browser device don t work since jquery 1 9  source - http   api jquery com jquery browser

User · Answer

Based on the documentation the origin parameter is optional and it defaults 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 amp destination Pike Place Market Seattle WA amp travelmode bicycling  For me this works on Desktop  IOS and Android

User · Answer

Interestingly  http   maps apple com links will open directly in Apple Maps on an iOS device  or redirect to Google Maps otherwise  which is then intercepted on an Android device   so you can craft a careful URL that will do the right thing in both cases using an  Apple Maps  URL like   http   maps apple com  daddr 1600 Amphitheatre Pkwy  Mountain View CA  Alternatively  you can use a Google Maps url directly  without the  maps URL component  to open directly in Google Maps on an Android device  or open in Google Maps  Mobile Web on an iOS device   http   maps google com  daddr 1 Infinite Loop  Cupertino CA

User · Answer

The URL syntax is the same regardless of the platform in use  String url    https   www google com maps search  api 1 amp query     latitude         longitude    In Android or iOS the URL launches Google Maps in the Maps app  If the Google Maps app 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 s the link for official documentation https   developers google com maps documentation urls guide

User · Answer

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

User · Answer

This works for me on all devices   iOS  Android and Window Mobile 8 1     Does not look like the best way by any means    but cannot be more simpler      lt a href  bingmaps  cp 18 551464 73 951399  gt    lt a href  http   maps apple com maps q 18 551464  73 951399  gt      Open Maps   lt  a gt   lt  a gt    http   jsbin com dibeq

User · Answer

I haven t worked much with phones  so I dont t know if this would work  But just from a html javascript point of view  you could just open a different url depending on what the user s device is   lt a style  quot cursor  pointer  quot  onclick  quot myNavFunc   quot  gt Take me there  lt  a gt   function myNavFunc           If it s an iPhone       if   navigator platform indexOf  quot iPhone quot      -1               navigator platform indexOf  quot iPod quot      -1              navigator platform indexOf  quot iPad quot      -1            window open  quot maps   www google com maps dir  api 1 amp travelmode driving amp layer traffic amp destination  YOUR LAT   YOUR LNG  quot        else          window open  quot https   www google com maps dir  api 1 amp travelmode driving amp layer traffic amp destination  YOUR LAT   YOUR LNG  quot

User · Answer

just bumped in this question and found here all the answers  I took some of the codes above and made simple js function that works on android and iphone  it supports almost every android and 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   gt   6            protocol    maps                    window location   protocol    maps apple com maps daddr     lat         lng     amp amp ll              else         window open  http   maps google com daddr     lat         lng     amp amp ll                 The html      lt a onclick  navigate 31 046051 34 85161199999993    gt Israel lt  a gt

User · Answer

Well no  from an iOS developer prospective  there are two links that I know of that will open the Maps app on the iPhone  On iOS 5 and lower  http   maps apple com q xxxx  On iOS 6 and up  http   maps google com q xxxx  And that s only on Safari  Chrome will direct you to Google Maps webpage   Other than that you ll need to use a URL scheme that basically beats the purpose because no android will know that protocol   You might want to know  Why Safari opens the Maps app and Chrome directs me to a webpage    Well  because safari is the build in browser made by apple and can detect the URL above  Chrome is  just another app  and must comply to the iOS Ecosystem  Therefor the only way for it to communicate with other apps is by using URL schemes

User · Answer

I found that this works across the board    lt a href  https   www google com maps place 1 Fake Street  City Province State gt Get Directions lt  a gt   For desktops laptops the user has to click Directions when that map loads  but from my testing all mobile devices will load that link in the Google Maps app without difficulty

User · Answer

Simple URL      https   www google com maps dir  api 1 amp destination lat lng   This url is specific for routing    Reference   https   developers google com maps documentation urls guide directions-action

[android] How to create a link for all mobile devices that opens google maps with a route starting at the current location, destinating a given place?

Examples related to android

Examples related to html

Examples related to ios

Examples related to google-maps

Examples related to mobile