Following is a stand alone HTML5 code that shows a simple sample for Html5 Geolocation API
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Location Sample</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> window.onload = Window_OnLoad; function Window_OnLoad() { var lbl = document.getElementById('lblLocation'); if (navigator.geolocation) { lbl.innerHTML = "Geolocation supported"; navigator.geolocation.getCurrentPosition( function (location) { lbl.innerHTML = location.coords.latitude + "," + location.coords.longitude; ShowGoogleMap(location.coords); AddMarker(location.coords); } ); } else { lbl.innerHTML = "Geolocation not supported"; } } var map; function ShowGoogleMap(Coords) { var mapOptions = { zoom: 15, center: new google.maps.LatLng(Coords.latitude, Coords.longitude), mapTypeId: google.maps.MapTypeId.ROADMAP }; var mapDiv = document.getElementById("divMaps"); map = new google.maps.Map(mapDiv, mapOptions); } function AddMarker(Coords, Title) { var markerOptions = { position: new google.maps.LatLng(Coords.latitude, Coords.longitude), map: map, title: Title, clickable: true }; var myLocationMarker = new google.maps.Marker(markerOptions); } </script>
</head>
<body> <span id="lblLocation"></span> <div id="divMaps" style="width:400px; height:400px"></div>
</body>
</html>
No comments:
Post a Comment