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


         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 ]);

            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



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!


You should build a proper LatLng Obj

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

Source: stackoverflow