I want to retrieve longitude, latitude and title from database, here's my code

Question

JavaScript example which takes the longitude and latitude, statically hard-coded:

I have to retrieve the values form database and show in maps as a marker, where the number of markers are dynamic. currently the information of the marker is dependent on the hard-coded values of longitude and latitude but the end result should be the values under the column latitude and longitude, and also the title of the marker should be viewed as Title from database.

<head>
<title>Google Map Integration</title>    
</head>
<body>

   <div>

       <!-- Google Map [Div]-->
       <div id="googleMap" style="width:auto; height:800px;"></div>
       <!-- END: Google Map [Div]-->

  </div>

      <!--Google Map-->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
          <script type="text/javascript">

          //Load Google-Map on [Page-Load]
          google.maps.event.addDomListener(window, 'load', resetMap());

          function resetMap() {            

        //Google-Map DefaultPosition
        var defaultPostion = new google.maps.LatLng(3, 101);
       

        //Set Google-Map properties:
        var mapProperties = {
            center: defaultPostion,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

            //Load Google-Map on "googleMap" [div]
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProperties);

            var locations = [
                            ['Tool Tip: Dubai', 25.10789521446838, 55.1819798029785, '<div><p>Dubai .</p></div>'],
                            ['Tool Tip: Houston', 29.9928829, -95.4859515, '<div><p>Houston.</p></div>'],
                            ['Tool Tip: London', 51.51121389999999, -0.11982439999997041, '<div><p>London.</p></div>'],
                            ['Tool Tip: Riyadh', 24.7116667, 46.72416670000007, '<div><p>Riyadh.</p></div>'],
                            ['Tool Tip: Kuala Lumpur', +Latitude , +Longitude, '<div><p>Kuala Lumpur.</p></div>']
            
                        ];

            for (i = 0; i < locations.length; i++) {

                var currentToolTip = locations[i][0]
                var currentLatitude = locations[i][1]
                var currentLongitude = locations[i][2]
                var currentContent = locations[i][3]

                var currentPostion = new google.maps.LatLng(currentLatitude, currentLongitude);

                //Add the [Marker] in Google-Map
                var marker = new google.maps.Marker({
                position: currentPostion,
                map: map,
                title: currentToolTip
                });

                //Initialize [Info Window] for each [Marker]
                var infoWindow = new google.maps.InfoWindow();

                //Add Listener for [Marker] "click"
                google.maps.event.addListener(marker,'click', (function(marker,currentContent){ 
                return function() {
                infoWindow.setContent(currentContent);
                infoWindow.open(map,marker);
            };
        })(marker,currentContent)); 


        } 
    }
</script>
<!--END: Google Map-->

My Controller, C# Code, Connecting to database

private DataTable GetData()
    {
        string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT Title, Longitude, Latitude FROM Article"))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        return dt;
                    }
                }
            }
        }
    }
}

so are you facing any issue in getting the values from database? Can you please explain what is the issue are you facing in the current code? — Vivek Nuna, Aug 08 '20 at 09:15
rather than taking values that are hard coded into code, i want the values to be taken from database, the Var Location should take values from database, but I dont know how to do it — Ezlo, Aug 08 '20 at 09:17
then you need to focus on how to call c# method from javascript — Vivek Nuna, Aug 08 '20 at 09:19
You can use the ajax to get the values from the controller. https://stackoverflow.com/questions/16186083/making-a-simple-ajax-call-to-controller-in-asp-net-mvc#answer-41279896 — Sowmyadhar Gourishetty, Aug 08 '20 at 09:23
Are you using MVC? Is the above method is in any of the controllers? why is it private? — Sowmyadhar Gourishetty, Aug 08 '20 at 09:26
How do I use Ajax? Can you refer me some additional references for my better understanding — Ezlo, Aug 08 '20 at 09:32
@BurhanJade, please refer to this post for more understanding of ajax https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get#answers-header — Sowmyadhar Gourishetty, Aug 08 '20 at 09:48
If you **must** use DataTables, then I suggest you to read the following links: **[Returning Value(all fields) from Datatable to AJAX in ASP.NET C#](https://stackoverflow.com/a/50830169/7471180)**, **[Ajax returning datatable always going in error part in asp.net](https://stackoverflow.com/a/48982599/7471180)** and **[3 Ways to Convert DataTable to JSON String in ASP.NET C#](https://www.c-sharpcorner.com/UploadFile/9bff34/3-ways-to-convert-datatable-to-json-string-in-Asp-Net-C-Sharp/)**. — Sagnalrac, Aug 08 '20 at 11:36
I tried ajax method, I but it shows in JavaScript that the variable doesn't exist, can you please help me solve — Ezlo, Aug 09 '20 at 16:12

I want to retrieve longitude, latitude and title from database, here's my code

0 Answers0