CODEWITHSUNDEEP
javascriptc#asp.net
NAJEEB
NAJEEB

Reputation: 251

Javascript Geolocation latitude and longitude variable access in asp.net

I am trying to get user location using geolocation using javascript, i can see the current location and all. but when i am trying to get the coordinates variable to c# object label its returning anything. below is my javascript.

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=ABC"></script>
    <script type="text/javascript">
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (p) {
                var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                var mapOptions = {
                    center: LatLng,
                    zoom: 20,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                var marker = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude,

                });
                google.maps.event.addListener(marker, "click", function (e) {
                    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setContent(marker.title);
                    infoWindow.open(map, marker);
                  //  document.getElementById("latitude").value = p.coords.latitude;
                 //   document.getElementById("longitude").value = p.coords.latitude;
                });

                var longitude = document.getElementById('latitude'),
                    latitude =  document.getElementById('longitude');
                function GetPosition(p) {
                    var long = p.coords.longitude,
                        lat = p.coords.latitude
                    longitude.text(long);
                    latitude.text(lat);
                }
            });
        } else {
            alert('Location feature is not supported in this browser.');
        }
    </script>

and the body 

 <div>
            <div id="dvMap" style="width: 500px; height: 500px"></div>
            <asp:Label ID="latitude" runat="server"></asp:Label>
            <asp:Label ID="longitude" runat="server"></asp:Label>
        </div>

Also tried with GeoCoordinateWatcher not succeeded. There is any other function that i can get the user location. thanks in advance.

Upvotes: 0

Views: 1657

Answers (1)

Priyal Pithadiya
Priyal Pithadiya

Reputation: 889

@NAJEEB, Try with below solution

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=ABC&callback=myMap"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      var longitude = $('#longitude');
       var latitude = $('#latitude');
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (p) {
             console.log(longitude);
                    longitude.text(p.coords.longitude);
                    latitude.text(p.coords.latitude);
                var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);

                var mapOptions = {
                    center: LatLng,
                    zoom: 20,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                var marker = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude,

                });
                google.maps.event.addListener(marker, "click", function (e)                 {
                    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setContent(marker.title);
                    infoWindow.open(map, marker);
                });
            });
        } else {
            alert('Location feature is not supported in this browser.');
        }
        });
    </script>
<title>Page Title</title>
</head>
<body>
 <div>
  <label ID="latitude"></label>
 <label ID="longitude"></label>
 <br/>
 <div id="dvMap" style="width: 500px; height: 500px"></div>
 </div>
</body>
</html>

Upvotes: 1

Related Questions