I need to show a Polyline with set of points taken dynamically from the DB exactly snap to road

Question

I have a polyline consisting of a set of latitude and longitude values which is taken dynamically from DB, I need it to snap exactly to the road when drawing it.

   $("#btnClk")
        .button()
        .click(function (event) {
            //  event.preventDefault();
            var vanselect = document.getElementById("svanid").value;
            var vanftdt = document.getElementById("ResDt").value;
         if ((vanselect.trim() != "") && (vanftdt.trim() != "")) {
                $.post("VanRoute.aspx", {
                    vanno: vanselect,
                    vandt: vanftdt

                     }, function (data, status) {

                    alert("Request In process, Please wait.");
                    var first = data.split('~')[0];
                    var second = data.split('~')[1];
                     var vanlocj = JSON.parse(first);

                    var vanlocjson = JSON.parse(second);


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

                        var vanlat, vanlon = "";
                        vanlat = vanlocjson[i].LAT;
                        vanlon = vanlocjson[i].LON;

After this how can i go further forward to snap a polyline exactly to road

I have created polyline overlay in function initialise which will work on page load.

       function initialize() {
          var mapOptions = {
              center: new google.maps.LatLng(12.860472, 77.664017),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          map1 = new google.maps.Map(document.getElementById("map"), mapOptions);
         // directionRenderer.setMap(map1);
         // directionRenderer.setOptions({
          //    draggable: true
          //});

          poly = new google.maps.Polyline({
              strokeColor: '#0000ff',
              strokeOpacity: 1.0,
              strokeWeight: 3
          });
         poly.setMap(map1);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

  });

Answer 1

Here I gave an example how to overcome the waypoint limitation using direction service: Gmap study: multi auto routes/direction with unlimited waypoints click by click . That you may took as basic and change it to your needs.