locked
Google Polylines and ASP.NET RRS feed

  • Question

  • User1239610449 posted

    I want to make polylines on google map using asp.net web page. I have more than 1000 latitudes and longitudes. But when I execute my page, it takes more than 3 minutes and show nothing. How to handle this situation, please help.

    Below is my code:

    If dt.Rows.Count > 0 Then
                strMap.Append("<script>")
                strMap.AppendLine("Function initMap() {")
                strMap.AppendLine("var map = New google.maps.Map(document.getElementById('map'), {")
                strMap.AppendLine("zoom:  10,")
                strMap.AppendLine("center: { lat: 24.873081, lng: 67.055482 },")
                strMap.AppendLine("mapTypeId: 'terrain'")
                strMap.AppendLine("});")
                strMap.AppendLine("var flightPlanCoordinates = [")
    
                For i As Integer = 0 To dt.Rows.Count - 1
                    If i = dt.Rows.Count Then
                        strMap.AppendLine("{ lat: '" & dt.Rows(i).Item("LATITUDE") & "', lng: '" & dt.Rows(i).Item("LONGITUDE") & "' }")
                    Else
                        strMap.AppendLine("{ lat: '" & dt.Rows(i).Item("LATITUDE") & "', lng: '" & dt.Rows(i).Item("LONGITUDE") & "' },")
                    End If
                Next
                strMap.AppendLine("];")
                strMap.AppendLine("var flightPath = New google.maps.Polyline({")
                strMap.AppendLine("path: flightPlanCoordinates,")
                strMap.AppendLine("geodesic:  true,")
                strMap.AppendLine("strokeColor: '#FF0000',")
                strMap.AppendLine("strokeOpacity: 1.0,")
                strMap.AppendLine("strokeWeight: 7")
                strMap.AppendLine("});")
                strMap.AppendLine("flightPath.setMap(map);")
                strMap.AppendLine("}")
                strMap.AppendLine("</script>")
    
                strMap.AppendLine("<script async defer src='https://maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap'></script>")
    
                ltlLatLng.Text = strMap.ToString
    
            End If
    Tuesday, December 5, 2017 4:20 PM

Answers

  • User-1838255255 posted

    Hi knowledgist,

    According to your description and code, i make a test in my side, if splice code wrong, it will show nothing and don't occur any error message, also can not debug it through your method.

    I notice that you want to load table data to google map show polylines, i recommend you could use jQuery ajax to get table data from code behind, then parse data to array then add them to polyline path.  Because if doesn't work, we could check which line code meet error in this way. 

    About how to get table data from code behind and parse them, please check the following sample tutorial:

    Return DataSet (DataTable) from WebMethod (PageMethod) to JavaScript / jQuery in ASP.Net using C# and VB.Net: 

    https://www.aspsnippets.com/Articles/Return-DataSet-DataTable-from-WebMethod-PageMethod-to-JavaScript-jQuery-in-ASPNet-using-C-and-VBNet.aspx 

    Please check the following code snippet:

    <head runat="server">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8" />
        <title>Simple Polylines</title>
        <style>
            #map {
                height: 100%;
            }
    
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="map"></div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                var flightPlanCoordinates;
                function initMap() {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 3,
                        center: { lat: 0, lng: -180 },
                        mapTypeId: 'terrain'
                    });
    
                    $.ajax({
                        type: "POST",
                        url: 'page name/code behind function',
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (data) {
                            // add tatble data here 
                        }
    
                    });
    
                    var flightPath = new google.maps.Polyline({
                        // use it 
                        path: flightPlanCoordinates,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });
    
                    flightPath.setMap(map);
                }
            </script>
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=api key&callback=initMap">
            </script>
        </form>
    </body>

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 6, 2017 9:26 AM

All replies

  • User2049726087 posted

     If i = dt.Rows.Count Then

    replace above line with 

    If i = dt.Rows.Count-1 Then

    Wednesday, December 6, 2017 4:32 AM
  • User-1838255255 posted

    Hi knowledgist,

    According to your description and code, i make a test in my side, if splice code wrong, it will show nothing and don't occur any error message, also can not debug it through your method.

    I notice that you want to load table data to google map show polylines, i recommend you could use jQuery ajax to get table data from code behind, then parse data to array then add them to polyline path.  Because if doesn't work, we could check which line code meet error in this way. 

    About how to get table data from code behind and parse them, please check the following sample tutorial:

    Return DataSet (DataTable) from WebMethod (PageMethod) to JavaScript / jQuery in ASP.Net using C# and VB.Net: 

    https://www.aspsnippets.com/Articles/Return-DataSet-DataTable-from-WebMethod-PageMethod-to-JavaScript-jQuery-in-ASPNet-using-C-and-VBNet.aspx 

    Please check the following code snippet:

    <head runat="server">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8" />
        <title>Simple Polylines</title>
        <style>
            #map {
                height: 100%;
            }
    
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="map"></div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                var flightPlanCoordinates;
                function initMap() {
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 3,
                        center: { lat: 0, lng: -180 },
                        mapTypeId: 'terrain'
                    });
    
                    $.ajax({
                        type: "POST",
                        url: 'page name/code behind function',
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (data) {
                            // add tatble data here 
                        }
    
                    });
    
                    var flightPath = new google.maps.Polyline({
                        // use it 
                        path: flightPlanCoordinates,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });
    
                    flightPath.setMap(map);
                }
            </script>
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=api key&callback=initMap">
            </script>
        </form>
    </body>

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 6, 2017 9:26 AM