Animating Google Map Marker To a Destination Point In Javascript v3

AnimateMarker(GoogleMap Javascript v3).js

/**
 * VAS-CONSULTING
 *
 * Animating Google Map Marker to a Destination In Javascript (v3)
 * 
 * @author Paul Okeke
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 */


/**
 * @param {google.maps.Marker} marker
 * @param {google.maps.LatLng} currentPos
 * @param {google.maps.LatLng} destinationPos
 * @returns {undefined}
 * The @param {google.maps.LatLng} currentPos is the position of the marker
 * on a map. This is an LatLng object passed.
 * @author Paul Okeke
 * @since 2014 (14-09-2014)
 */
function animateMarkerToPostion(marker, currentPos, destinationPos)
{
    //variables for the latitude and longitude of the current position of the marker
    var currentLat = currentPos.lat();
    var currentLng = currentPos.lng();
    
    //variables for the destination of the marker... 
    //this specifies the x and y of where we'd animate the marker to
    var destinationLat = destinationPos.lat();
    var destinationLng = destinationPos.lng();
    //alert(currentLat + " : "+destinationLat);
    
   /**
    * NOTE::::
    * To animate this marker to the destination it means we need to 
    * increment X and Y of the current position based on a specific duration
    * till it gets to its destination.
    * Thus (Xa - Xb) is the horizotal distance between the currentPosition and Destination
    * (Ya - Yb) is the vertical distance between the currentPosition and Destination
    * if we get the difference between both axis we therefore know at what point we
    * stop incrementing the X and Y of the currentpostion.
    * let say Xb of currentPos is 40 and Xa of destination is 45
    * the difference is 5, that is we need to add 1 to Xa 5times till it gets to 45
    * but this will not give us a smooth animation.
    * instead of adding a 1 5times we'd probably want to add a fraction to the current position
    * at an interval of lets say 16ms 
    */
      /**
       * @author Paul Okeke
       * @type @new;Date@call;getTime
       * @param {animDuration} name description
       * We need to specify a time in milliseconds the animation starts
       * 
       * remember that @param {type} animationStartTime 
       * will remain constant after it has initially been set
       * let say on the first call to animateMarkerPositionTo() method
       * the time is 2:00 oclock
       * We presume or assert that our animation started at 2:00oclock
       * Then we start up an iterval that is to run after every 16ms(milliseconds)
       */
       
        
        //this will return the time this method was called in milliseconds:e.g 43543623322
        var animStartTime = new Date().getTime();
        
        /**
         * For how long should the animation run before it gets to its destination..
         * this can also determine how fast or slow you want the marker to move or animate
         */
        var animDuration = 5000;
        var i =20;
        
        /**
        * This is an interval that has being scheduled to run every 16ms
        * thus it will keep running until you order it to stop.
        */
        var interval = setInterval(function()
        {    
          /**
           * This will return the current time in milliseconds that this interval re-runs:e.g 43543623338
           * The current time should be the animationStartTime + the  total time elapsed that the interval 
           * function waited before it re-runs..
           * so n1.....n20 re-runs will be animationStartTime + 16ms +16ms.... and so on till it stops
           */
            var currentTime = new Date().getTime();
            
            //This will then get the difference between currentTime and animStartTime //thus 16ms + 16ms: 
            //It is the time distance between the animStartTime and the currentTime
            var timeElapsed = currentTime - animStartTime;
            
            /**
             * Here you need to remember that 5000 in milliseconds is 5secs
             * so @param {}fractionAdd will equal 1 only when the time elapsed is 5000 (5secs)
             * 5000/5000 = 1 :: this means animationDuration for 5secs has been completed 
             */
            var frationToAdd = timeElapsed/animDuration;
            
            /**
             * All we are doing here is adding a fraction to the currentPosition Latitude and Longitude
             * Example : destinationLat = 4.3234, currentLat = 4.9345
             *           destinationLng = 6.23245, currentLng = 6.44234
             * 
             * (destinationLat - currentLat)= the value we can add at once to currentLat that sets the marker 
             *                                on the same x-axis of the destinationLat
             * 
             * (destinationLng - currentLng)= the value we can add at once to currentLng that sets the marker 
             *                                on the same y-axis of the destinationLng
             */
            var newLat = (destinationLat - currentLat) * frationToAdd + currentLat;
            var newLng = (destinationLng - currentLng) * frationToAdd + currentLng;

            /**
             * creates an new LatLng object:: 
             * WARNING::: There are better ways of doing this than creating a new object each time
             */
            var newLatLng = new google.maps.LatLng(newLat, newLng);
            
            //setTimeOut function is not really neccessary:: It only post another 16ms delay
            setTimeout(function(){
                marker.setPosition(newLatLng);
                map.panTo(newLatLng);
                map.setTilt(1+i);
                i=i+5;
                },16); 
                
            /**
             * This condition is to check if the marker has arrived at his destination
             * or animationDuration is completed which still means the later
             */ 
            if(frationToAdd>1)
            {
                clearInterval(interval);
            }

        }, 16);
    }