Animating Symbols - Google Maps API

Question

I'm trying to use this demo to animate a symbol over line.

Google Maps API - Animating Symbols

My problem that I want to use image but not Google symbol, but when I'm using the code above, the image not showing up, only the Google symbol.

Here is the relevant code. All the rest is exactly like in the example.

var line = new google.maps.Polyline({
    path: lineCoordinates,
    map: map,
    icons: [{
        icon: 'icons/cannon.png',
        offset: '100%'
    }]
});

Answer 1

The problem is that google.maps.Polyline accepts only Symbol as a argument, not an image.

However, hope is not all lost. You have two different options to animate.

(1) Make a Symbol path yourself as stated in the docs:

The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation. Required.

And then animate with the same code you were using from google api docs example.

(2) Animate marker which image you have changed to one you like.

Js fiddle example about this

Linking also relevant parts of the code below, note that I used requestAnimationFrame for stepping the animation because it is commonly known as best practice to do animations.

JavaScript:

/**
 * requestAnimationFrame version: "0.0.17" Copyright (c) 2011-2012, Cyril Agosta ( cyril.agosta.dev@gmail.com) All Rights Reserved.
 * Available via the MIT license.
 * see: http://github.com/cagosta/requestAnimationFrame for details
 *
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 * http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 * requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 * MIT license
 *
 */

( function() {

    if ( typeof window === 'undefined' )
        return

    if ( window.requestAnimationFrame )
        return window.requestAnimationFrame

    if ( window.webkitRequestAnimationFrame ) { // Chrome <= 23, Safari <= 6.1, Blackberry 10
        window.requestAnimationFrame = window[ 'webkitRequestAnimationFrame' ];
        window.cancelAnimationFrame = window[ 'webkitCancelAnimationFrame' ] || window[ 'webkitCancelRequestAnimationFrame' ];
        return window.requestAnimationFrame
    }

    // IE <= 9, Android <= 4.3, very old/rare browsers

    var lastTime = 0;

    window.requestAnimationFrame = function( callback, element ) {

        var currTime = new Date().getTime();
        var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
        var id = window.setTimeout( function() {
                callback( currTime + timeToCall );
            },
            timeToCall );
        lastTime = currTime + timeToCall;
        return id; // return the id for cancellation capabilities
    };

    window.cancelAnimationFrame = function( id ) {
        clearTimeout( id );
    };

    if ( typeof define === 'function' ) {
        define( function() {
            return window.requestAnimationFrame;
        } )
    }

} )();

/**
 * The application code
 *
 */
function initialize() {
  var myLatlng = new google.maps.LatLng(35, 105);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  // Path we are animating along
  var route = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(35, 110),
      new google.maps.LatLng(35, 100)
    ],
    map: map
  });

  // Marker object we are animation
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35, 110),
    map: map,
    icon: "http://placehold.it/32/ff0000" // Change this image to one you want
  });

  // Handle to requestAnimationFrame
  var requestID,
      // How many times we move
      steps = 0;

  /**
   * Method for animating marker along the line
   *
   */
  var draw = function() {

    // Controlling the speed of animation
    requestID = requestAnimationFrame(draw);

    // Current position of the marker
    var pos = marker.getPosition();

    // Next position of the marker (we use - 0.1 from previous position)
    marker.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() - 0.1));

    // If we have reached the end of the path - cancel animationFrame
    if (steps === 99) {
      cancelAnimationFrame(requestID); 
      return;
    }

    // Increasing steps
    steps++;

  };

  // Start animation
  draw();

}    

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

Also, if jsfiddle example dies at some point:

HTML: All the normal tags for the page, plus this:

<div id="map-canvas"></div>

CSS:

html, body {
  height: 100%;
}

#map-canvas {
    height:500px;
    width:500px;
}

Also, remember to include google maps JavaScript. :)

As a final note, instead of doing:

// Next position of the marker (we use - 0.1 from previous position)
marker.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() - 0.1));

You could also use more complex paths by walking along a positions received from the MVCarray which you can get from the polyline itself by calling:

// Path for marker
path = route.getPath();

The full example about that is demonstrated in this js fiddle example (Note: animation is fast because example uses only 11 LatLng positions in the polyline path.)

Cheers.