Get Current Location of User and Display on Map In asp.net c#

Hi,I am Navid Shaikh today i am going to show you how to get current location of user and display on map.The location is displayed on map by lattitude and longitude.
     To do so please follow below steps,

• First of all your internet connection should up and working as well as your GPS.
• Next open visual studio new Website and write below code.
• And to display map you need obtain the key  from google maps to do this follow the below link,
• https://code.google.com/apis/console then insert your key in script tag where you should see key=  after query string(?key="your key").

Source code (.aspx)

      <%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Map" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
        }
    </style>
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/style-responsive.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />

    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=sensor=false">
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=sensor=false&libraries=places">
    </script>
    <script type="text/javascript">
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);
        } else {
            alert("Geo Location is not supported on your current browser!");
        }
        function success(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var city = position.coords.locality;
            var myLatlng = new google.maps.LatLng(lat, long);
            var myOptions = {
                center: myLatlng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: myLatlng,
                title: "lat: " + lat + " long: " + long
            });
            marker.setMap(map);
            var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" });
            infowindow.open(map, marker);
            document.getElementById("lat").value = lat;
            document.getElementById("lon").value = long;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center;">
            <div class="form-inline">
                <input id="lat" type="text" runat="server" class="form-control" />
                <input id="lon" type="text" runat="server" class="form-control" />

                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-primary" OnClick="LinkButton1_Click" >Submit</asp:LinkButton><br />
                <br />

            </div>
            <div class="form-group">
                <div id="map_canvas" style="width: 500px; height: 400px;"></div>
            </div>
        </div>
    </form>
</body>
</html>

Output: