Google Maps 3 Redraw Polyline Flickering

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:

  • Removing all controls from a google map
  • Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener
  • Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap
  • where is the 'googleBar' in google maps api v3
  • equivalent to GMap2.savePosition in v3 Maps API?
  • How to manually reload Google Map with JavaScript
  • 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?

  • angularJS find the location/place name using angular google map
  • Display world map with no repeats
  • Google Map event bounds_changed triggered multiple times when dragging
  • Google Maps API v3 set zoom level to show a given radius?
  • Google Maps load API script and initialize inside ember.js view
  • PlaceResult object returns latitude/longitude as object, not sure how to get them individually
  • One Solution collect form web for “Google Maps 3 Redraw Polyline Flickering”

    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.