Post
Ask Question

User Current Location on Google Map using GeoLocation API in Website

Below are my aspx and script references:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.     <title>Get User Current Location using Google Map Geolocation API Service in asp.net  
  7.         website</title>  
  8.     <style type="text/css">  
  9.         html  
  10.         {  
  11.             height: 100%;  
  12.         }  
  13.         body  
  14.         {  
  15.             height: 100%;  
  16.             margin: 0;  
  17.             padding: 0;  
  18.         }  
  19.         #MyMapLOC  
  20.         {  
  21.             height: 100%;  
  22.         }  
  23.     </style>  
  24.   
  25.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">  
  26.     </script>  
  27.   
  28.     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">  
  29.     </script>  
  30.   
  31.     <script type="text/javascript">  
  32.         if (navigator.geolocation) {  
  33.             navigator.geolocation.getCurrentPosition(success);  
  34.         } else {  
  35.         alert("There is Some Problem on your current browser to get Geo Location!");  
  36.         }  
  37.   
  38.         function success(position) {  
  39.             var lat = position.coords.latitude;  
  40.             var long = position.coords.longitude;  
  41.             var city = position.coords.locality;  
  42.             var LatLng = new google.maps.LatLng(lat, long);  
  43.             var mapOptions = {  
  44.                 center: LatLng,  
  45.                 zoom: 12,  
  46.                 mapTypeId: google.maps.MapTypeId.ROADMAP  
  47.             };  
  48.   
  49.             var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);  
  50.             var marker = new google.maps.Marker({  
  51.                 position: LatLng,  
  52.                 title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "   
  53.                             + lat + +"<br />Longitude: " + long  
  54.             });  
  55.   
  56.             marker.setMap(map);  
  57.             var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" +   
  58.                                     lat + "<br /> Longitude:" + long + "" });  
  59.             getInfoWindow.open(map, marker);  
  60.         }  
  61.     </script>  
  62.   
  63. </head>  
  64. <body>  
  65.     <form id="form1" runat="server">  
  66.     <div id="MyMapLOC" style="width: 550px; height: 470px">  
  67.     </div>  
  68.     </form>  
  69. </body>  
  70. </html> 

Now run your application:

current location
                                                                           Image 1.

You can change display setting from right top corner options:

map
                                                                              Image 2.

change display setting
                                                                           Image 3.

output
                                                                           Image 4.
Next Recommended Reading Live Currency Converter Application in Asp.net C# using Google API