Question

Does anyone know how they animate and updating their markers:

http://www.zappos.com/map/
or
http://dailybooth.com/map

How they make a periodic ajax call and jquery for the animation?
Is there a jquery plugin or a tutorial?

Thanks

Answer 1

You have

window.setInterval ("load_updates()", 5000);

in the main page, it calls the javascript function load_updates() every 5 seconds.

Then in load_updates(), you have a $.getJSON() jquery’s function loading a javascript object named ‘json’ from the server which contains the datas to print.

For the big finish, the callback of the getJSON do this :

var picture = new add_picture(point, json.picture, json.username, json.picture_id, json.user_id);

which print the image on the screen whith some jquery’s effects.

If you want to know more, use Google Chrome or Firefox to inspect the main page, it is important you learn to do that on website when you want to steal some idea for your personal work !