I'm trying to move a marker on a GoogleMap to simulate real time object movements. At present the JavaScript pseudo code for how I do this is:

var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map
});

var myMovementArray[] = new movementArray(startPoint, endPoint);

drawMovement(int pos){
    marker.setPosition(myMovementArray[pos]["lat"], myMovementArray[pos]["lng"]);
    pos++;
    if (pos < myMovementArray.length()){
        setTimeout('drawMovement('+pos+')', 33);
    }
}

init(){
    drawMovement(0);
}

Where each element in the movement array is calculated through:

deltaLat = (endPos.lat - startPos.lat)/frames;
deltaLng = (endPos.lng - startPos.lng)/frames;
myMovementArray[i]["lat"] = startPos.lat + (deltaLat * i);
myMovementArray[i]["lng"] = startPos.lng + (deltaLng * i);

For reference, the full JavaScript file I am using is up at: .kamkash.locateme.viewer.dev.js

The problem I have is that this method of moving markers on Google maps seems to be quite processor intensive. I've searched around to see if the Google Maps API has a clean way of animating marker movement from point A to point B, but can't find anything. And the other most referenced method for doing this that I've found is exemplified at .html but then that uses the same method I have deployed.

The code is used in practice at: www.spad.es/random

Does anybody have a more processor-efficient/cleaner way of doing this?

Thanks

I'm trying to move a marker on a GoogleMap to simulate real time object movements. At present the JavaScript pseudo code for how I do this is:

var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map
});

var myMovementArray[] = new movementArray(startPoint, endPoint);

drawMovement(int pos){
    marker.setPosition(myMovementArray[pos]["lat"], myMovementArray[pos]["lng"]);
    pos++;
    if (pos < myMovementArray.length()){
        setTimeout('drawMovement('+pos+')', 33);
    }
}

init(){
    drawMovement(0);
}

Where each element in the movement array is calculated through:

deltaLat = (endPos.lat - startPos.lat)/frames;
deltaLng = (endPos.lng - startPos.lng)/frames;
myMovementArray[i]["lat"] = startPos.lat + (deltaLat * i);
myMovementArray[i]["lng"] = startPos.lng + (deltaLng * i);

For reference, the full JavaScript file I am using is up at: http://spad.es/js/.kamkash.locateme.viewer.dev.js

The problem I have is that this method of moving markers on Google maps seems to be quite processor intensive. I've searched around to see if the Google Maps API has a clean way of animating marker movement from point A to point B, but can't find anything. And the other most referenced method for doing this that I've found is exemplified at http://www.geocodezip./v3_animate_marker_directions.html but then that uses the same method I have deployed.

The code is used in practice at: www.spad.es/random

Does anybody have a more processor-efficient/cleaner way of doing this?

Thanks

• javascript
• google-maps
• animation

• I have also seen this entry: stackoverflow./questions/665193/… but it does not answer the question on if there is a more processor friendly approach. The example of the car with directions uses a GIcon which seems less intensive, but then I am not sure if I can attach an accuracy radius (google.maps.Circle object) to it – Kaiesh Commented Mar 12, 2011 at 11:40
• 1 Google Maps API renders markers much more efficiently if they are set via KML. Not sure if that improves performance for moving a marker as well, but it seems plausible. – Trott Commented May 21, 2011 at 4:57

2 Answers 2

This may be a problem with canvas markers. Try setting the optimized: false marker option - this causes markers to not render as canvas markers.

You can optimize deltaLat and deltaLng a lot with a raster algorithmus like the Bresenahm algorithmus: http://en.wikipedia/wiki/Bresenham%27s_line_algorithm. In x-axe it uses always 1 pixel step and in y-axe it depends on an clever error correction.

deltaLat = (endPos.lat - startPos.lat)/frames;
deltaLng = (endPos.lng - startPos.lng)/frames;