Google Maps 3 Redraw Polyline Flickering

Question

I am drawing a Polyline with a fairly large number of lat/lng points (~ 1000). I have two sliders (start and end) that allow the user to adjust the time bounds which then updates the Polyline to show the data between those two times.

My update algorithm goes something like this:

var mvcPath = new google.maps.MVCArray();

for (var i = 0; i < gpsData.length; i++) {

    if (gpsData[i]['timestamp'] <= endDate && 
        gpsData[i]['timestamp'] >= startDate) {
        mvcPath.push(gpsData[i]['location']);
    }
}

this.path.setPath(mvcPath);

Now the weird thing is, when I drag the end slider the line redraws as expected, however when I drag the start slider, it redraws the line correctly except at high zoom levels parts of the line seem to move slightly (it doesn't do this when zoomed in close). I thought it might be something to do with the anti alias algorithm Google applies to the Polyline but it doesn't do it when I move the end slider.

Anyone know what is causing this flickering?

Answer 1

I've hacked a solution which seems to work for now. I tried to keeping the number of points consistent as the API didn't seem to like me adding points to the front.

Lets say I have a set of 1000 points and I only want to show from 200 - 900. If I draw the location of point 200, 200 times then draw the rest of the data to point 900, it stops the flickering. To display 10 - 330 I would draw point 10, 10 times then draw the rest of the data to point 330.

I guess this has something to the way Google internally stores the lines of the map, if you add to the front of the line it may have to re-index a whole array and redraw the line from scratch.

I won't accept the answer for now incase someone comes up with a better answer.