Draw Lines between Multiple markers on Google Map

I am little new in JavaScript and Google Map. I am trying to draw lines between my multiple location. I am following this example.

My Code is like this

<script type="text/javascript">
function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 2
    };
}


  $.ajax({
      type:'get',
      url:'https://example.com/info.php',
      data:{

      },
      dataType:'json',
      success:function(result){
         var UserLatitude;
         var UserLongitude;
         var color = "red";
         var last ;
         
         var MyData = result['Result'];
         var InformationArray = [];
         var LocationArray = [];
         
          for(var i=0; i<MyData.length; i++){
              var UserLatitude = parseFloat(MyData[i]['UserLatitude']);
              var UserLongitude = parseFloat(MyData[i]['UserLongitude']);
              var LastTrackedOn = MyData[i]['LastTrackedOn'];
              var InSchoolLocation = MyData[i]['InSchoolLocation'];
                
                InformationArray.push([ LastTrackedOn, UserLatitude, UserLongitude, InSchoolLocation ]);
                LocationArray.push([UserLatitude,UserLongitude]);
              
            }
            
            console.log(InformationArray);
            console.log(LocationArray);

            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 12,
              center: new google.maps.LatLng(21.947275, 71.720822222)
             
            });
        
            var infowindow = new google.maps.InfoWindow();
        
            var marker, i;
        
            for (i = 0; i < InformationArray.length; i++) { 
                var color = "red";
                if(InformationArray[i][3] == true){
                    color= "green";
                }
                
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(LocationArray[i][0], LocationArray[i][1]),
                map: map,
                icon: pinSymbol(color)
              });
        
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent("Tracked On: "+InformationArray[i][0]+ " ");
                  infowindow.open(map, marker);
                }
              })(marker, i));
            }

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

    });

 
  </script>

Its showing places fine and without issue. Its just not drawing the lines. I am getting error like below

InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

I am not getting idea what I should do for fix the issue. Let me know if any expert here can help me for the same. Thanks!

Answer

You should build a proper LatLng Obj

LocationArray.push(new google.maps.LatLng(UserLatitude, UserLongitude));