Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's actually pretty simple. The above example from Dive into HTML is incomplete, as it doesn't show the show_map function, which is a user-created function that actually reads the incoming data and does something with it. Here's a more complete example:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html lang = "en"&gt; &lt;head&gt; &lt;title&gt;location.html&lt;/title&gt; &lt;meta charset = "UTF-8" /&gt; &lt;script type = "text/javascript"&gt; //&lt;![CDATA[ function getLoc(){ navigator.geolocation.getCurrentPosition(showMap); } // end getLoc function showMap(position){ var lat = position.coords.latitude; var long = position.coords.longitude; var linkUrl = "http://maps.google.com?q=" + lat + "," + long; var mapLink = document.getElementById("mapLink"); mapLink.href = linkUrl; var embedMap = document.getElementById("embedMap"); embedMap.src = linkUrl + "&amp;z=16&amp;amp;output=embed"; } // end showMap //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body onload = "getLoc()"&gt; &lt;h1&gt;Geolocation Demo&lt;/h1&gt; &lt;p&gt; &lt;a id = "mapLink" href = "http://maps.google.com"&gt;click for a map&lt;/a&gt; &lt;/p&gt; &lt;iframe id = "embedMap" width="800" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src= ""&gt; &lt;/iframe&gt;&lt;br /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This example (from my upcoming HTML5 book) has a getLoc() function called by the body onload mechanism. This uses the navigator.geolocation.getCurrentPosition() function to request a permission vector. It will pop up a permission dialog, which will be rejected if the user chooses not to share her current position. If the user does play along, the indicated callback function (in my case showMap) will be displayed. </p> <p>The callback function automatically accepts a special position object as its only parameter. This object has a number of potentially useful attributes, but latitude and longitude are the most helpful. You can use these values to simply print out the current position. You can also concatenate these values into a Google maps URL to get a quick Google map of the current location. I also embedded a Google map into my current page, and changed the URL of the embedded (iframe) map to get immediate feedback.</p> <p>Hope this helps!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload