Friday, March 22, 2013

Html5- Geolocation API- With Google Maps

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