Geolocation in HTML5 Using ASP.NET

Shirsendu Nandi

7y253.6k17100Article

17 Comments

Join the conversation! Your thoughts help the community grow.

Luai Kayyali4y ago
Hello, it worked for me, you need https
Abdul Amin Khan6y ago
It is not asking permission without permission showing location please suggest me how to add permission before getting location
Anupam Modak8y ago
Can this code give me location even if the web application is not HTTPS?
ekwugha franklin8y ago
Not orking ro
Nagendra Kushwah8y ago
Map is not showing after popup message. How can I solve it?
solomon sojirin9y ago
Written the codes and i am running it its not bringing out the google map
Manav Pandya10y ago
How can we do same in asp.net mvc sir ???
kalu singh rao10y ago
Nice...
Prasad Bhagat11y ago
can u bind the longitude and latitude values to asp.net textboxes .if yes how can? or no why?
salim Reza14y ago
thx brother , but how i can keep the location in object ? pls answer my question
salim Reza14y ago
thx brother , but how i can keep the location in object ? pls answer my question
Stelia Jackson14y ago
thnx for sharing ur views...
Sanjoli Gupta14y ago
thnx for sharing...
Abhi Kumar14y ago
Very helpful article.
Sonakshi Singh14y ago
Good approach Shirsendu..
Monika Arora14y ago
You have explained your article very nicely. Thanks for sharing.
Aaron Cronje14y ago
Good Explain......

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:

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:

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:

See in this above code sections first we are getting latitude and longitude by using the following code:

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="geolocation.aspx.cs" Inherits="WebApplication1.geolocation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body >
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Get your Location</button>
<div id="mapholder" ></div>
<script type="text/javascript">
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else { x.innerHTML = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
var latlondata = position.coords.latitude + "," +position.coords.longitude;
var latlon = "Your Latitude Position is:=" + position.coords.latitude + "," + "Your Longitude Position is:=" +position.coords.longitude;
alert(latlon)
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+ latlondata + "&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "
<img src='" + img_url + "' />";
}
function showError(error) {
if (error.code == 1) {
x.innerHTML = "User denied the request for Geolocation."
}
else if (err.code == 2) {
x.innerHTML = "Location information is unavailable."
}
else if (err.code == 3) {
x.innerHTML = "The request to get user location timed out."
}
else {
x.innerHTML = "An unknown error occurred."
}
}
</script>
<form id="form1" runat="server">
<div></div>
</form>
</body>
</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.

After that when you press "OK" then you will get the Google map location like in the following picture:

Conclusion

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