In Progress

Google map animation

This is a very simple project. The aim is to identify a developer for further development of a javascript/googlemaps based application.

Project requirement:

Using the google map API v3, animate the "panTo" function.

I have a web page that renders a map based on a given set of coordinates. After the map is displayed, I would like the map to slowly "panTo" a new set of coordinates by stepping through an array of all the coordinates between "current position" and "new position" ... the following example code illustrates what I want:

function initialize() {

// This function is linked to the page body onload=initialize

// initial coordinates to generate map

lat="51.4100";lng="[url removed, login to view]";

latlng = new [url removed, login to view](lat,lng);

var options = {

zoom: 15,

center: latlng,

disableDefaultUI: true,

mapTypeId: [url removed, login to view]


// Initialize the map

map = new [url removed, login to view]([url removed, login to view]('map'), options);

// Using these new coordinates, generate a list of coordinates between the current position and the new position

// The genPoints function sits in a second javascript library and works for this example

newLat = '51.3216';newLng = '[url removed, login to view]';

pointarray = genPoints(map,newLat,newLng);

// Once the initial map is displayed and after two seconds, loop through "pointarray" and use panTo for each new coordinate

[url removed, login to view](function() {




function animate(pointarray) {

for( point in pointarray ) {

newLat = pointarray[point].split(",")[0];

newLng = pointarray[point].split(",")[1];

[url removed, login to view](function() {

[url removed, login to view](new [url removed, login to view](newLat,newLng));




The above code fails because javascript doesn't appear to update the map during the "for loop" ... rather it updates at the end and pans directly to the last coordinate.

Future projects will require:

1. Highlight road

2. Animate icon along road (panning map so that icon remains at the center at all times...hence this project)

3. Discussions around similar functionality for the google earth browser plugin.

Skills: Javascript

See more: panto animation google map javascript, google map panto, google earth loop animation javascript, google map animation, animation google map, slowly panto google maps, google map maptypeid example, animation function google map, google map panto animate, javascript pointarray, google maps javascript animate, google maps animation, panto google maps, what is google code, web icon set, web development icon, web developer split, projects on animation, projects in animation, linked list animation, library icon, javascript code library, i want a web developer projects, icon web development, icon google icon

About the Employer:
( 5 reviews ) Surrey, United Kingdom

Project ID: #890480