Geolocation in HTML5 Using ASP.NET

Shirsendu Nandi
Jan 18, 2012
122.5k
0
5
Article

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.