JavaScript GeoLocation


/ Published in: JavaScript
Save to your folder(s)

This will only work in FF 3.5 and web-kit browsers after (06/26/2009)


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script src="geoLocation.js"></script>
  6. <style>
  7. div#location {
  8. border: 1px solid #000000;
  9. height: 300px;
  10. margin-left: 25%;
  11. margin-top: 5%;
  12. padding: 10px 5px 10px 5px;
  13. width: 50%;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18.  
  19. <div id="location">
  20.  
  21. </div>
  22.  
  23. <script>
  24. /**
  25.  * Sample GeoLocation Script
  26.  * Adam Shannon
  27.  * 06/26/2009
  28.  */
  29.  
  30. function getLocation() {
  31. // First we must test to see if GeoLocation is even supported.
  32. if (navigator.geolocation) {
  33.  
  34. // Now wee can start the service.
  35. // navigator.geolocation.startup();
  36.  
  37. // Check to see if the API is ready.
  38. // if (!navigator.geolocation.isReady()) {
  39. // alert("Whoops, your GeoLocation API is not currently ready");
  40. // }
  41.  
  42. // Make the call
  43. // navigator.geolocation.getCurrentPosition(success, fail, options);
  44. navigator.geolocation.getCurrentPosition(function(position) {
  45. fillDiv(
  46. position.coords.latitude,
  47. position.coords.longitude,
  48. position.coords.altitude,
  49. position.coords.accuracy,
  50. position.coords.altitudeAccuracy,
  51. position.coords.heading,
  52. position.coords.speed
  53. );
  54. });
  55.  
  56. // Shut it down
  57. // navigator.geolocation.shutdown();
  58.  
  59. } else {
  60. alert("Whoops, it seems like your browser doesn't support GeoLocation.");
  61.  
  62. }
  63.  
  64. return;
  65. }
  66.  
  67. function fillDiv(latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed) {
  68. // Go...
  69. // alert(latitude);
  70. // alert(longitude);
  71.  
  72. var e = document.getElementById("location");
  73. e.innerHTML = "";
  74. e.innerHTML += "Latitude: " + latitude + "<br />";
  75. e.innerHTML += "Longitude: " + longitude + "<br />";;
  76. e.innerHTML += "Altitude: " + altitude + "<br />";;
  77. e.innerHTML += "Accuracy: " + accuracy + "<br />";;
  78. e.innerHTML += "altitudeAccuracy: " + altitudeAccuracy + "<br />";;
  79. e.innerHTML += "Heading: " + heading + "<br />";;
  80. e.innerHTML += "Speed: " + speed;
  81. return;
  82. }
  83.  
  84. // Now call
  85. getLocation();
  86. </script>
  87. </body>
  88. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.