google maps live tracking issue with Polylines - google-maps

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>