How to show user's current visiting area location in .NET MVC

Question

How to get and show client location in ASP.NET C# and explain clear with all functionlity

Chetan Sanghani · Answer

To get and show the client's location in an ASP.NET C# application, you can use the HTML5 Geolocation API to obtain the client's latitude and longitude, and then display the location on a map using a mapping service such as Google Maps. Here's a step-by-step guide on how to implement this: Create the ASP.NET MVC Project First, create a new ASP.NET MVC project if you don't have one already. Create the View In your Views/Home folder, create an Index.cshtml file. This view will contain the HTML and JavaScript code to get the client's location and display it on a map. @{ ViewBag.Title = "Client Location"; } Client Location Get Location function getLocation() { if (navigator.geolocation) { document.getElementById("status").innerHTML = "Getting your location..."; navigator.geolocation.getCurrentPosition(showPosition, showError); } else { document.getElementById("status").innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; document.getElementById("status").innerHTML = "Latitude: " + lat + " Longitude: " + lon; // Initialize Google Maps var map = new google.maps.Map(document.getElementById("map"), { center: { lat: lat, lng: lon }, zoom: 14 }); // Add marker var marker = new google.maps.Marker({ position: { lat: lat, lng: lon }, map: map, title: 'You are here!' }); } function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: document.getElementById("status").innerHTML = "User denied the request for Geolocation."; break; case error.POSITION_UNAVAILABLE: document.getElementById("status").innerHTML = "Location information is unavailable."; break; case error.TIMEOUT: document.getElementById("status").innerHTML = "The request to get user location timed out."; break; case error.UNKNOWN_ERROR: document.getElementById("status").innerHTML = "An unknown error occurred."; break; } } Create the Controller In your Controllers folder, create a HomeController.cs file if it doesn't exist and add an action to return the view. using System.Web.Mvc; namespace YourNamespace.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } } } Set Up the Route Make sure the default route in RouteConfig.cs points to the Home controller and Index action. public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } } Include Google Maps API Key Replace YOUR_API_KEY in the Google Maps JavaScript API script tag with your actual Google Maps API key. You can obtain a key from the Google Cloud Console. Run the Application Run the application and navigate to the Home/Index view. Click the "Get Location" button to retrieve the client's location and display it on the Google Map. Explanation HTML and JavaScript : The Index.cshtml view contains a button to trigger the geolocation request, a paragraph to display status messages, and a div to display the map. The JavaScript functions getLocation , showPosition , and showError handle the geolocation process. The getLocation function checks if geolocation is supported and requests the user's location. The showPosition function initializes the Google Map and adds a marker at the user's location. The showError function handles any errors that occur during the geolocation process. Controller : The HomeController contains an action to return the view. Google Maps API : The Google Maps JavaScript API is included in the view to display the map. Replace YOUR_API_KEY with your actual API key to use the service. This setup will allow you to get the client's location and display it on a map using ASP.NET MVC and the Google Maps JavaScript API.