Car tracking on map
<p><p>I have a web page with a map on it. I'm using <a href="http://leafletjs.com/index.html" rel="nofollow">Leaflet maps</a> and programming is done in javascript. Each 10-15 seconds i recieve a json with gps coordinates of N (max. N=3000) cars in it. So my goal is to display these cars on map and animate smoothly their movement along the streets of the city.
<p>What i have done now: 
Each car is represented as a <a href="https://github.com/ewoken/Leaflet.MovingMarker" rel="nofollow">Leaflet moving marker</a> on map. Each time i receive new coordinates i move each marker from it's old position to the new position just by writing something like: <code>listOfCars[i].marker.moveTo(coord, 10000);</code>
It just draws an invisible line between new and old points and moves the marker along this line. And here i have a problem:<br>How should i deal with turns in the road? When a car is about to turn (for example) to the right it sends it's coordinates, 10 seconds pass(car turns and continues it's motion) and it sends it's coordinates again. So on the map the marker moves straight from the old point(when the car was about to turn) to the new point (which we get after the car turned and moved a bit forward) through the houses, parks and other places where cars just can't get (it's like a hypotenuse of a right triangle). My questions:</p>

<ul>
<li>How should i deal with this 'turn problem'?</li>
<li>How do developers of apps (like Uber) which track cars on map deal with such problems?</li>
<li>Are there any ways to optimize performance of my 'web site' ? It seems like if i increase the number of markers on map (up to 5000 for example) on some computers and phones it will perform very slowly.</li>
</ul>

<p>Thaks for help!</p>