Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animating Google Map Marker To a Destination Point In Javascript v3
/**
* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment