CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcgoogle-mapspolyline
siavash bashiri
siavash bashiri

Reputation: 419

Problem getting an array of latitude longitude using polyline to draw a path

I want to draw a path using Polyline by waypoints (lat, lng) saved in the SQL server database. When I set waypoints manually it works fine and draws a rout but when I want to get latitude and longitude from the database it doesn't work. I don't get any kind of errors just doesn't work, I don't have any points or markers and doesn't draw a path.

<html>
    <head>
       <meta charset="UTF-8" />
       <script src="http://maps.google.com/maps/api/js?sensor=false" 
       type="text/javascript"></script>
       <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    </head>

    <body>
      <div id="map" style="width:1200px; height: 600px;"></div>
    </body>
</html>



  <script>  
    function initialize() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(31.909786, 54.365912),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        var Coordinates = [];
        $.ajax({
            url: '/Home/GetPath',
            type: 'Post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $.each(data, function (index, value) {
                    Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
                });

            },
            error: function () {
            }
        });

        var polyline = new google.maps.Polyline({
            path: Coordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        for (var i = 0; i < polyline.getPath().getLength(); i++) {
            var marker = new google.maps.Marker({
                position: polyline.getPath().getAt(i),
                title: polyline.getPath().getAt(i).toUrlValue(6),
                map: map      
            });
        }
        polyline.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

And here is the action in my controller

    [HttpPost]
    public JsonResult GetPath()
    {
         var q = TrackDb.TestTrackingTable_
            .Where(x => x.DoccNo == 4844)
            .Select(s => new
            {
                lat = s.latitude,
                lng = s.longitude
            })
            .ToList();

This is my ViewModel

     public class TrackHisViewModel
{
    public int Id { get; set; }

    public int PointStep { get; set; }

    public int DoccNo { get; set; }

    public decimal  Longitude { get; set; }

    public decimal Latitude { get; set; }
}

my database table my database table

Upvotes: 0

Views: 690

Answers (1)

Simon Arruti
Simon Arruti

Reputation: 316

Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code. That means that your 'Coordinates' array may be empty when initializing the polyline.

You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.

Upvotes: 1

Related Questions