The following demo intends to describe how to use the HTML5 Geolocation feature. The gist includes three step files:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>HTML5 Demo: geolocation</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
| <div id="container"> | |
| <div id="mapcanvas" style="height: 500px; width: 960px"></div> | |
| </div> | |
| <script> | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(success, error); | |
| } else { | |
| error('not supported'); | |
| } | |
| function success(position) { | |
| console.log(position) | |
| var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
| var myOptions = { | |
| zoom: 15, | |
| center: latlng | |
| }; | |
| var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); | |
| var marker = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| title:"You are here! (at least within a " + position.coords.accuracy + " meter radius)" | |
| }); | |
| } | |
| function error(msg) { | |
| switch(error.code) { | |
| case error.PERMISSION_DENIED: | |
| alert("User denied the request for Geolocation.") | |
| break; | |
| case error.POSITION_UNAVAILABLE: | |
| alert("Location information is unavailable.") | |
| break; | |
| case error.TIMEOUT: | |
| alert("The request to get user location timed out.") | |
| break; | |
| case error.UNKNOWN_ERROR: | |
| alert("An unknown error occurred.") | |
| break; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>HTML5 Demo: geolocation</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
| <div id="container"> | |
| <div id="mapcanvas" style="height: 500px; width: 960px"></div> | |
| </div> | |
| <script> | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(success); | |
| } | |
| function success(position) { | |
| console.log(position) | |
| var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
| var myOptions = { | |
| zoom: 15, | |
| center: latlng | |
| }; | |
| var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); | |
| var marker = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| title:"You are here! (at least within a " + position.coords.accuracy + " meter radius)" | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>HTML5 Demo: geolocation</title> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script> | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(success); | |
| } | |
| function success(position) { | |
| var div = document.getElementById('container'); | |
| div.innerHTML = "lat: " + position.coords.latitude + "<br>lng: " + position.coords.longitude; | |
| } | |
| </script> | |
| </body> | |
| </html> |
