I created an Animation class to move Markers across a map - is this useful?

[Coen de Jong]

Hi all,

I'm fairly new to this all so don't burn me down just yet...

After I discovered that there is no good way to animate Markers across the map (in fact the only animations available are the DROP and BOUNCE ones upon creation), I decided to create my own class that can do this. It's attached to this message.

I tried to follow the Maps v3 style of object specification as much as possible. Here's a usage example:

marker.animation = new MarkerMoveAnimation(marker,

{ 

name: name

,from: start

,to: new google.maps.LatLng(-33, 150)

,duration: 500

,effect: 'easeout'

,onStep: function(e)

{

e.marker.leash.setPath([start, e.marker.getPosition()]);

}

,onComplete: function(e)

{

animating = false;

}

})

See the source for the full class capabilities, it is not that hard to understand. It supports the callbacks onBeforeStart, onStep (fires on each step of the animation) and onComplete (whenever an animation is stopped, can also be invoked when directly calling stop() on the instance. The callbacks get the object instance passed along, so you can access the marker and it's methods.

1. Is this helpful?
2. Please give feedback on code efficiency, bugs, etc.
3. Where should I go with this? Should I create a google code project or just place it somewhere online?
4. Maybe there is a need for a generic animation class that allows for opacity (fade in/out) animation and possibly other things as well?

I personally use this class to animate markers that are too close together which makes it too hard sometimes to click the markers.

[ora726]

Hi Coen,

Interesting, I was searching for something like that to animate a
marker along a path.

I got a few of questions :
1) Does each update of the marker position add to the google map api
quota ?
2) Do you know if each call to move the marker generate data traffic
or is the google API trying to do some of the marker moves locally on
the client side ?
3) I wanted to use this to move the marker along a route returned by
google between two points, do y know if that is possible ?

Thanks for any know how you may share.

-Raymond

[Coen de Jong]

Hi Raymond, thanks for the reply!

1. To be honest I don't know... Never thought of that. What I do is I include the API via javascript and then just query the API through the google.maps namespace. Dunno about any quotas, afaik I download the files to the client side and then the JS files modify the map element on the page, so all client-side, right? I'm not using GWT or AppEngine myself. There it might be different. But normal html pages with Maps API included have a quota too?
2. As before, I don't know exactly. Yes the animation simply changes the position of the marker a var delta amount of degrees, depending on the progress, duration and distance that needs to be covered in that duration of course. If you want to cover a lot of ground in say a second, the steps will be relatively large, limiting the setPosition() calls. The more fluent it should go, the more steps, the more calls.
3. The class that I wrote now simply moves a marker along a linear path with several animation effects. I wouldn't know how to do it along a returned google directions route, have never looked into that. But if that contains an array with points or Polyline with paths, you can technically animate from path to path. That'll be a lot of animations then, so maybe not the most efficient way to do it and might bring some performance issues. But worth a try...

Hope this helps!

[Coen de Jong]

Did some additional research, and it turns out all the marker movements are done locally, so it doesn't affect the API usage and it doesn't generate any traffic because all actions are done locally. As long as you don't do any requests to the Geocoding or Google Maps static resources or so, all code is executed locally.

In addition, the API limits are only on map loads, as I get it from this page: http://code.google.com/apis/maps/faq.html#usagelimits

[xelawho]

> 3) I wanted to use this to move the marker along a route returned by
> google between two points, do y know if that is possible ?

have you seen Larry's example?
http://www.geocodezip.com/v3_animate_marker_directions.html