Post
Ask Question

Geolocation in HTML5 Using ASP.NET

Introduction

 
In this article, I will describe how to get your geolocation (Latitude and Longitude) using Google maps in HTML5.
 

Descriptions

 
Actually The HTML5 Geolocation API is used to get the geographical position of a user.
 
Now here the browser provides support for doing this Geolocation features.
 
I.E 9, Firefox, Chrome, Safari and Opera support Geolocation.
 
In HTML5 the getCurrentPosition() method is to get the user's position.
 
Here we will get the first user latitude and longitude by using the getCurrentPosition() method.
 
Thereafter with this latitude and longitude, we will feed the data to the Google maps and will get the current user locations in maps.
 
Now here I am showing the steps for using these useful HTML5 features in ASP.NET.
 
Step 1:
 
Create a New web application project in ASP.NET.
 
Step 2:
 
Add a new webpage named "geolocation.aspx" and set it as the startup web page.
 
Step 3:
 
Now in the source page first write the following code:
 
GelHTML1.jpg
 
See here I have included one button and one div named "mapholder" on where I will display the user's current location using Google maps.
 
Step 4:
 
Now see the following code sections:
 
GelHTML2.jpg
 
See here the function "getlocation"; we are using:
 
navigator.geolocation.getCurrentPosition(showPosition, showError); to get the current positions. It is an HTML5 API.
 
Step 5:
 
Now see the following code sections:
 
GelHTML3.jpg
 
See in this above code sections first we are getting latitude and longitude by using the following code:
  1. position.coords.latitude and position.coords.longitude;  
After getting these records we are feeding the Google maps with the value
 
And finally, display it in the "mapholder" div.
 
So here is the full code segment:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="geolocation.aspx.cs" Inherits="WebApplication1.geolocation" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.     <body >  
  9.         <p id="demo">Click the button to get your position:</p>  
  10.         <button onclick="getLocation()">Get your Location</button>  
  11.         <div id="mapholder" ></div>  
  12.         <script type="text/javascript">  
  13.     var x = document.getElementById("demo");  
  14.     function getLocation() {  
  15.         if (navigator.geolocation) {  
  16.             navigator.geolocation.getCurrentPosition(showPosition, showError);  
  17.         }  
  18.         else { x.innerHTML = "Geolocation is not supported by this browser."; }  
  19.     }   
  20.     function showPosition(position) {  
  21.         var latlondata =  position.coords.latitude + "," +position.coords.longitude;  
  22.         var latlon = "Your Latitude Position is:=" + position.coords.latitude + "," + "Your Longitude Position is:="  +position.coords.longitude;  
  23.         alert(latlon)  
  24.         var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="  
  25.   + latlondata + "&zoom=14&size=400x300&sensor=false";  
  26.         document.getElementById("mapholder").innerHTML = "  
  27.             <img src='" + img_url + "' />";  
  28.     }  
  29.     function showError(error) {  
  30.         if (error.code == 1) {  
  31.             x.innerHTML = "User denied the request for Geolocation."  
  32.         }  
  33.         else if (err.code == 2) {  
  34.             x.innerHTML = "Location information is unavailable."  
  35.         }  
  36.         else if (err.code == 3) {  
  37.             x.innerHTML = "The request to get user location timed out."  
  38.         }  
  39.         else {  
  40.             x.innerHTML = "An unknown error occurred."  
  41.         }  
  42.     }  
  43.         </script>  
  44.         <form id="form1"  runat="server">  
  45.             <div></div>  
  46.         </form>  
  47.     </body>  
  48. </html>  
Now when you run the program and press the button, first it will look like the following picture;
 
it will give you latitude and longitude positions.
 
GelHTML4.jpg
 
After that when you press "OK" then you will get the Google map location like in the following picture:
 
GelHTML5.jpg
 

Conclusion

 
So in this article, we have learned how to use the Geolocation API in HTML5 using ASP.NET.


Similar Articles