Below are my aspx and script references:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  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>
  25. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
  26. </script>
  28. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
  29. </script>
  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. }
  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. };
  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. });
  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>
  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.