Moving markers in the Google Maps API v3 without an intensive processor?

Question

I am trying to move a marker in GoogleMap to simulate the movement of objects in real time. Currently, JavaScript pseudo code for how I do this:

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 of the displacement 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 use is located at http://spad.es/js/com.kamkash.locateme.viewer.dev.js

The problem is that this method of moving markers on Google maps seems to be very intense. I searched to see if the Google Maps API has a clean way of animating marker movement from point A to point B, but cannot find anything. And the other most reference method for this that I found is given at http://www.geocodezip.com/v3_animate_marker_directions.html , but then uses the same method that I deployed.

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

Does anyone have a more efficient or cleaner way to do this?

thanks

Answer 1

This may be a problem with canvas markers. Try setting the optimized: false marker optimized: false - this leads to the fact that the markers are not displayed as canvas markers.

Answer 2

You can optimize deltaLat and deltaLng a lot with a raster algorithm such as the Bresenahm algorithm: http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm . In x-ax, it always uses 1 pixel pitch, and in y-ax it depends on smart error correction.

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