google maps live tracking issue with Polylines

Question

I'm trying to start a live tracking via google maps fetching new locations from a database via ajax and it works fine but the problem is with drawing Polylines I get this error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: not an Object" which means the "line" variable value can't be used as a point as in here google maps link. Here's the code

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
function autoUpdate() {
    $.post('ajax/track.php',{car:'1'}).done(function (data) {
        var parsed = JSON.parse(data);
        var lat = parsed.lat,
            lon = parsed.lon;
        var newPoint = new google.maps.LatLng(lat,lon);
        var line = "{lat: "+lat+", lng: "+lon+"},";

        if (marker) {
            // Marker already created - Move it
            marker.setPosition(newPoint);
             var flightPlanCoordinates = [
            ];
            flightPlanCoordinates.push(line);
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            flightPath.setMap(map);
        }
        else {
            marker = new google.maps.Marker({
                position: newPoint,
                map: map,
                icon: 'images/1.png',
            });
        }
        map.setCenter(newPoint);
    });
    setTimeout(autoUpdate, 5000);
}
autoUpdate();

UPDATE as suggested by @geocodezip: var line = {lat: lat, lng: lon}; I got this error "InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number" so I changed it into

var line = {lat: parseFloat(lat), lng: parseFloat(lon)};

in console I get the last location only not an array of locations

Answer 1

The error is telling you that this:

var line = "{lat: "+lat+", lng: "+lon+"},";

Is not a google.maps.LatLng or a google.maps.LatLngLiteral, because it isn't, it is a string.

This would be a valid google.maps.LatLngLiteral:

var line = {lat: lat, lng: lon};

proof of concept fiddle

code snippet:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
var initlat = 42;
var initlon = -72;
var increment = 0.001;
var count = 0;
var flightPlanCoordinates = [];

function autoUpdate() {
  /*  $.post('ajax/track.php', {
      car: '1'
    }).done(function(data) { */
  data = JSON.stringify({
    lat: +(initlat + increment * count),
    lon: +(initlon + increment * count)
  });
  // data = "{lat:" + (initlat + increment * count) + ",lon:" + (initlon + increment * count) + "}";
  count++;
  var parsed = JSON.parse(data);
  var lat = parsed.lat,
    lon = parsed.lon;
  var newPoint = new google.maps.LatLng(lat, lon);
  // var line = "{lat: " + lat + ", lng: " + lon + "},";
  var line = {
    lat: lat,
    lng: lon
  };
  flightPlanCoordinates.push(line);
  if (marker) {
    // Marker already created - Move it
    marker.setPosition(newPoint);


    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    flightPath.setMap(map);
  } else {
    marker = new google.maps.Marker({
      position: newPoint,
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
  }
  map.setCenter(newPoint);
  // });
  setTimeout(autoUpdate, 5000);
}
autoUpdate();

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>