Google map animation

This project was awarded to bdimuch for $100 USD.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$100 - $150 USD
Total Bids
Project Description

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="[url removed, login to view]";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 = '[url removed, login to view]';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.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online