× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Is there a way to invoke navigation from mobile browser?

Xaver Kapeller
Mar 13, 2015
<p>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. </p> <h2> <strong>1) Showing a location in a native map app</strong></h2> <p>With the geo link you can specify a location like this:</p> <pre><code>geo:longitude,laditude </code></pre> <p>Or like this:</p> <pre><code>geo:street+address </code></pre> <p>You can also search for an address like this:</p> <pre><code>geo:?q=street+address </code></pre> <p>You can also define a zoom level like this:</p> <pre><code>geo:street+address?z=3 </code></pre> <p>And it is also possible to combine multiple parameters like this:</p> <pre><code>geo:?q=street+address&amp;z=15 </code></pre> <p>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. </p> <p><a href="http://developer.android.com/guide/components/intents-common.html#Maps" rel="nofollow">Here</a> is a little bit of Android documentation. </p> <h2><strong>2) Opening a route in Google Maps</strong></h2> <p>You can also use the following link to just show a route between two locations:</p> <pre><code>http://maps.google.com/maps?saddr=street+adress&amp;daddr=street+address </code></pre> <p>And coordinates also work with this:</p> <pre><code>http://maps.google.com/maps?saddr=50,10&amp;daddr=50,20 </code></pre> <p>You can again use it like this:</p> <pre><code>&lt;a href="http://maps.google.com/maps?saddr=New+York&amp;daddr=San+Francisco"&gt;Route New York --&gt; San Francisco&lt;/a&gt; </code></pre> <h2><strong>3) Immediately starting a navigation</strong></h2> <p>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:</p> <pre><code>google.navigation:q=street+address </code></pre> <p>You can also use coordinates:</p> <pre><code>google.navigation:q=50,10 </code></pre> <p>You would use it like this:</p> <pre><code>&lt;a href="google.navigation:q=San+Francisco"&gt;Navigation to San Francisco&lt;/a&gt; </code></pre> <h2><strong>4) Testing</strong></h2> <p>I have tested everything on a Nexus 5 running Android 4.4 (KitKat) with the following HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Geo Link Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;&lt;a href="geo:50,10"&gt;Location 50/10&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="geo:Vienna"&gt;Location Vienna&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="geo:?z=5&amp;q=New+York"&gt;Zoom 5, Search for New York&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="geo:?q=San+Francisco&amp;z=15"&gt;Zoom 15, Search for San Francisco&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="google.navigation:q=San+Francisco"&gt;Navigation to San Francisco&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="google.navigation:q=50,10"&gt;Navigation to 50/10&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="http://maps.google.com/maps?saddr=New+York&amp;daddr=San+Francisco"&gt;Route New York --&gt; San Francisco&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="http://maps.google.com/maps?saddr=50,10&amp;daddr=50,20"&gt;Route 50/10 --&gt; 50/20&lt;/a&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/23232273/Is%20there%20a%20way%20to%20invoke%20navigation%20from%20mobile%20browser?/23233315">Stack Overflow</a>.</p>
comments powered by Disqus