Content
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 these 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 this 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 a 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.