Menu
I am developing a very small HTML5/javascript website to be openned by mobile browsers from devices like android / iphone. I am using geo location of HTML5 to get the current location but once I have that I want to navigate to some destination. The best I came up with was that the user clicks on a link similar to the link below
https://maps.google.com/maps?saddr=london&daddr=paris However that does not open the navigation app, it just switches to the mobile Google Maps website. Is there a way to open the navigation (GPS) app by using HTML5/javascript? Something like this:
navigate:London to Paris 
518
If the Google Maps app is not installed, the map view will open in a mobile browser or in the default Maps app. , followed by Open View in Google Maps. If Google Maps is installed, and the zoom level selected is valid, Google Maps will open and display the same map view.
On your computer, open Google Maps. Go to the directions, map, or Street View image you want to share. Select Share or embed map. If you don't see this option, click Link to this map.
You can use geo links to open the navigation app on Android. Unfortunately this is not supported under iOS. But generally you have to remember that you can't directly control how this link is handled on the device, as I said iOS does nothing or may even show an invalid link error, and there may be Android devices which also do not support this feature. Just remember that you cannot be sure if it works anywhere and as such your website should not depend on this feature, it should just be an extra bit of usability for devices which support this feature.
With the geo link you can specify a location like this:
geo:longitude,laditude Or like this:
geo:street+address You can also search for an address like this:
geo:?q=street+address You can also define a zoom level like this:
geo:street+address?z=3 And it is also possible to combine multiple parameters like this:
geo:?q=street+address&z=15 But beware that this does not work as expected. In this case in Google Maps it starts out with the defined zoom level and then starts the search an zooms in on the target.
Here is a little bit of Android documentation.
You can also use the following link to just show a route between two locations:
http://maps.google.com/maps?saddr=street+adress&daddr=street+address And coordinates also work with this:
http://maps.google.com/maps?saddr=50,10&daddr=50,20 You can again use it like this:
<a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a> With this option the link opens a route to a location and the device doesn't just show the route but it immediately starts navigating:
google.navigation:q=street+address You can also use coordinates:
google.navigation:q=50,10 You would use it like this:
<a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a> I have tested everything on a Nexus 5 running Android 4.4 (KitKat) with the following HTML:
<!DOCTYPE html> <html> <head> <title>Geo Link Test</title> </head> <body> <p><a href="geo:50,10">Location 50/10</a></p> <p><a href="geo:Vienna">Location Vienna</a></p> <p><a href="geo:?z=5&q=New+York">Zoom 5, Search for New York</a></p> <p><a href="geo:?q=San+Francisco&z=15">Zoom 15, Search for San Francisco</a></p> <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p> <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p> <p><a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a></p> <p><a href="http://maps.google.com/maps?saddr=50,10&daddr=50,20">Route 50/10 --> 50/20</a></p> </body> </html>Since this question was first posted and answered, as of Oct. 2017, Google has developed an API called Maps URL.
It is a universal, cross-platform URL for launching google maps.
https://www.google.com/maps/dir/?api=1 is the endpoint for maps that could include navigation.
You add the following parameters:
&origin=new+york &destination=san+fransisco &dir_action=navigate If you leave out the origin, it will detect the location of the device, which is probably better for navigation anyway:
https://www.google.com/maps/dir/?api=1&destination=san+fransisco&dir_action=navigate
This will not immediately open navigation, but will take you to a google map, which will have the navigation icon on the page, and will give the user the option to use the app (or download it if they don't have it). This seems like a good solution. I just tested it in my browser, my Google Pixel, and my iPhone and it works the same on each mobile device.
Check out the rest of the documentation for more useful features: https://developers.google.com/maps/documentation/urls/guide
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
