Advertisement
v_staykov

Get geoloctaion

Apr 7th, 2013
268
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.31 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Geo location</title>
  5.     <style>
  6.         h1 {
  7.             color: #0094ff;
  8.         }
  9.  
  10.         span {
  11.             font-style: italic;
  12.         }
  13.  
  14.         body > a {
  15.             display: block;
  16.             width: 200px;
  17.             margin-top: 25px;
  18.             padding: 10px 0;
  19.             text-align: center;
  20.             color: #000;
  21.             text-decoration: none;
  22.             text-transform: uppercase;
  23.             border: 1px solid #000;
  24.         }
  25.     </style>
  26.     <script>
  27.         function onGetPosBtnClick() {
  28.  
  29.             document.getElementById("output").innerHTML = "Locating...";
  30.  
  31.             if ('geolocation' in navigator) {
  32.  
  33.                 navigator.geolocation.getCurrentPosition(displayLocation, fail, { enableHighAccuracy: true, maximumAge: Infinity, timeout: 27000 });
  34.             }
  35.             else {
  36.  
  37.               alert("No geolocation available in this browser!");
  38.             }
  39.         }
  40.  
  41.         function fail(){
  42.             document.getElementById("output").innerHTML = "<strong>Unable to get current location!</strong>";
  43.         }
  44.  
  45.         function displayLocation(position) {
  46.  
  47.             var latitude = position.coords.latitude;
  48.             var longitude = position.coords.longitude;
  49.             document.getElementById("output").innerHTML = "Latitude: " + latitude + "; Longitude: " + longitude + "<br /><br /><br />";
  50.  
  51.             var map = new Image;
  52.             map.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=10&size=300x300&sensor=false";
  53.             document.getElementById("output").appendChild(map);
  54.             map.align = '';
  55.         }
  56.     </script>
  57.  
  58. </head>
  59. <body>
  60.     <h1>Get current geolocation</h1>
  61.     <span>Note: It may take a while!Also if you are using proxy/VPN it may fail to get location.
  62.         <br />
  63.         I've tried at home via my WiFi and it worked only on IE (all versions) :D
  64.         <br />
  65.         <a href="https://dl.dropbox.com/u/93896656/Screenshot_2013-04-07-15-28-35.png">HERE</a> you can find
  66.         a screenshot of my mobile, using the GSM network to get my location.
  67.     </span>
  68.     <a href="#" onclick="onGetPosBtnClick()" title="Get location">get location</a>
  69.     <p id="output"></p>
  70. </body>
  71. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement