Moving Marker on a PolyLine using Google Maps api v3

Question

I am using Google Maps API V3. I am trying to animate a marker on the Polyline smoothly.

I have Tried this http://jsfiddle.net/bmSbU/154/

Here I have made fixed points as (30,-110) and (30,-100) so I can able to make based on the fixed points.

Now my question is how to do the same when I have multiple points (PolyLine) and the marker should move smoothly without any flicking on map.

var map;
var path;
var marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    route = new google.maps.Polyline({
        path: [
        new google.maps.LatLng(30, -110),
        new google.maps.LatLng(30, -100)],
        map: map
    });

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(30, -110),
        map: map
    });

    counter = 0;
    interval = window.setInterval(function () {
        counter++;
        var pos = new google.maps.LatLng(30, -110 + counter / 100);
        marker.setPosition(pos);
        if (counter >= 1000) {
            window.clearInterval(interval);
        }
    }, 10);
}

google.maps.event.addDomListener(window, 'load', initialize);

Can anybody help me out?

Answer 1

Your jsfiddle plays smoothly for me on the latest version of Safari on a newer macbook pro. YMMV with different hardware/platforms.

Fundamentally, CSS animations generally outperform similar animations implemented in Javascript. I think the Google Maps API is going to cause animation artifacts when you call Marker#setPosition() via timeout internals. See this answer for How to add custom animation on Google Map V3 Marker when I drop each marker one by one? for a deep dive into hacking how Google internally implements the google.maps.Marker#setAnimation method using CSS animations.

Another option is to stop using Google's Marker type, and implement a custom marker type that supports custom CSS animation. This is not as hard as it sounds. Check out a blog post by Mike Bostock on using D3 for custom markers on Google Maps.