☰

After going through the previous chapter now you may have familiarity with HTML5 Drag and Drop Event. Now in this chapter we will learn about the HTML5 Geolocation.

HTML5 Geolocation

Approx three years ago when mobile android devices came into the boom, and today we are surrounded by the many of Smartphones and also now we are addicted to using it. In the present scenario the Smartphone is not only for the voice interaction purpose but more than that. Now with the development of HTML5 We can use the tracking of Geolocation and not only the latitude displaying but also we can view the digital map with HTML5 Geolocation features. Though We can use it on the browser also, but it best suit on android or Smartphone.

HTML5 Geolocation is basically used to locate the position of current internet user.

Supported Browser
html5 tutorial html5 tutorial html5 tutorial html5 tutorial html5 tutorial

Below is complete syntax along with example


<!DOCTYPE html>

<html>
	
    <head>
    	 
		 <title>Title name will go here</title>

    </head>
    
    <body>
	   		 
		 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
			 
		 <script type="text/javascript">
		 
		 	var x=document.getElementById("mapp");
			function getLocation()
  			{
  				if (navigator.geolocation)
    			{
    				navigator.geolocation.getCurrentPosition(showPosition,showError);
    			}
  				else
				{
					x.innerHTML="Geolocation is not supported by this browser.";
				}
  			}
			
			function showPosition(position)
  			{
  				lat=position.coords.latitude;
  				lon=position.coords.longitude;
  				latlon=new google.maps.LatLng(lat, lon)
  				display=document.getElementById('display')
  				display.style.height='250px';
  				display.style.width='525px';
  				var myOptions={
  				center:latlon,zoom:14,
  				mapTypeId:google.maps.MapTypeId.ROADMAP,
  				mapTypeControl:false,
  				navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}};
			
  				var map=new google.maps.Map(document.getElementById("display"),myOptions);
  				var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  			}

			function showError(error)
  			{
  				switch(error.code) 
    			{
    				case error.PERMISSION_DENIED:
      				x.innerHTML="User denied the request for Geolocation."
      				break;
    				case error.POSITION_UNAVAILABLE:
      				x.innerHTML="Location information is unavailable."
      				break;
    				case error.TIMEOUT:
      				x.innerHTML="The request to get user location timed out."
      				break;
    				case error.UNKNOWN_ERROR:
      				x.innerHTML="An unknown error occurred."
      				break;
    			}
  			}
		 
		 </script>
		 	
		<p id="mapp">Click on the button to see your current location. <button onclick="getLocation()">DEMO</button> </p>
		<div id="display"></div>
        
    </body>
    
</html>

Download


HTML5 Elements — Quick References