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?

[animated markers on polyline from directions service](http://www.geocodezip.com/v3_animate_marker_directions.html), [animated marker on polyline from xml](http://www.geocodezip.com/v3_animate_marker_xml.html) — geocodezip, Jan 24 '14 at 06:43
Please post your code in the question, not a reference to a jsfiddle. — geocodezip, Jan 24 '14 at 06:44
See the example shown in this other question: [Moving a Marker along a polyline][1] [1]: http://stackoverflow.com/questions/29639324/display-polyline-as-a-marker-moves-along-it-google-maps-api — Marcelo, Apr 15 '15 at 07:03

score 0 · Answer 1 · edited May 23 '17 at 12:29

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.

Moving Marker on a PolyLine using Google Maps api v3

1 Answers1