How To Use Html5 To Get GEO Location Data

Geolocation is a new feature of HTML5. In this article, we will learn and master the relevant geolocation APIs and learn how to use HTML5 to get geolocation data such as longitude, latitude, altitude, and speed.

Table of Contents

1. What Is Geolocation?

Geolocation is to provide LBS ( Location Based Service ) by obtaining the geographic coordinates of the current web browser.

The data returned by the geolocation API includes longitude, latitude, altitude, and speed.

2. How To Get GEOLocation Information From Html5.

First, open the google chrome web browser and press F12 to open the Console tab window.
Then input the code window.navigator.geolocation in the Console tab, then press the Enter key.

Then it will return the Geolocation object.
Click the down arrow to expand the object methods list, there are 3 important methods we can use.
getCurrentPosition:fn(succ,err): Get the current positioning data, including the callback functions of successful acquisition and failed acquisition.

watchPosition: fn(): Monitor the position data.
clearWatch: fn(): Clear the position monitor.

3. How To Use Html5 To Get Geolocation Example.

Create an Html file and name it get_geo_location_use_html5.html.

Copy the below source code into it and save it.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get GEO Location By Html5 Example</title>
</head>
<body>
<!-- When you click the bellow button, it will call the below  -->
<button id="btn">Click To Get Your GEO Locations</button>  
<script>  
    /* when the element with the id btn is clicked will trigger this function. */
    btn.onclick=function(){  
    	
    	/* call the function that will return the current GEO location. */
        navigator.geolocation.getCurrentPosition(succCB,errCB);  
        
    	/* this callback function will be called when the navigator.geolocation.getCurrentPosition() method success. */
        function succCB(pos){ 
    		
        	message = 'Successfully get your GEO location data.'
        	
        	longitude_string = 'longitude:'+pos.coords.longitude
        	latitude_string = 'latitude:'+pos.coords.latitude        	
        	altitude_string = 'altitude:'+pos.coords.altitude        	
        	speed_string = 'speed:'+pos.coords.speed       	
        	
        	document.write(message)
        	document.write('<br/>')
            document.write(longitude_string)
            document.write('<br/>')
            document.write(latitude_string)
            document.write('<br/>')
            document.write(altitude_string)
            document.write('<br/>')
            document.write(speed_string)
        	
        	console.log(message);  
            console.log(longitude_string);  
            console.log(latitude_string);  
            console.log(altitude_string);  
            console.log(speed_string);  
            
        } 
    	
        /* this callback function will be called when the navigator.geolocation.getCurrentPosition() method fail. */
        function errCB(err){ 
            
        	message = 'Failed to get your GEO location data.'
        	
        	/* write the error message on the web page. */
        	document.write(message)
        	document.write('<br/>')
        	document.write(err.message)
        	
        	/* print the error message on the web browser console. */
        	console.log(message);  
            console.log(err.message); 
            
        }  
    }  
</script>  
</body>  
</body>
</html>

When you use the google chrome web browser to browse the above Html file, you can see a button with the text Click To Get Your GEO Locations.

When you click the button, you can see the below GEO location data on the web page.

Successfully get your GEO location data.

longitude:-82.7347142

latitude:39.9178032

altitude:null

speed:null

The above altitude and speed value are null, this is because I browse the Html file from a PC web browser, if you browse the Html file from a mobile web browser, you can get those data.
If you use the google chrome web browser to browse the above Html file, you can press the F12 key to open the chrome console window, and you can also find the above data in the console log window.

1. What Is Geolocation?

2. How To Get GEOLocation Information From Html5.

3. How To Use Html5 To Get Geolocation Example.

Leave a Comment Cancel Reply