Moving markers in Google Maps API v3 without being so processor intensive?

Question

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/com.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.com/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

I have also seen this entry: http://stackoverflow.com/questions/665193/how-to-animate-a-custom-google-maps-marker-along-a-route 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, Mar 12 '11 at 11:40
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, May 21 '11 at 04:57

Chad Killingsworth · Accepted Answer · 2012-09-06T14:14:40.493

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.

edited Sep 06 '12 at 14:14

answered Feb 16 '12 at 12:32

Chad Killingsworth

14,360
2
34
57

This sounds right. You must be forcing the whole tile to render each time. – Oliver May 28 '12 at 09:41

score 0 · Answer 2 · answered Feb 16 '12 at 12:51

You can optimize deltaLat and deltaLng a lot with a raster algorithmus like the Bresenahm algorithmus: http://en.wikipedia.org/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;

Moving markers in Google Maps API v3 without being so processor intensive?

2 Answers2