google maps v3 distance - google-maps

Question

Trying to create a new version of the map functions seen here: http://www.daftlogic.com/projects-google-maps-distance-calculator.htm
but using the v3 api.
So far I am able to set markers on click and can draw the geodesic polyline.
The issues I am currently running into are:
Updating the poly-line on marker drag
I'm pretty sure I have to put each marker in an array and do a for
loop so that I can keep clicking and adding points that will add to
the total distance.
Properly displaying distance.
I have created a jsfiddle: http://jsfiddle.net/wyZyS/
EDIT: I realize I have nothing calling the "update" function. I am trying to create the array for each marker currently. The calculation you see is converting meters to nautical miles.

Answer 1

I wrote something like this a while ago as an exercise. Sadly it works properly only in Chrome, it has strange bugs in other browsers. The distance function should work in IE9.
The idea I had was to add drag listeners to your markers and keep a single polyline representing the path, updating its paths as the markers are dragged.
DEMO http://freezoo.alwaysdata.net/freezoomaps/freezoomaps.html
google.maps.event.addListener(tmpNode, 'drag', function(event) {
distance.drawPath();
});
distance.drawPath = function() {
distance.countNodes();
var coords = [];
for (var i = 0; i < distance.nodes.length; i++) {
coords.push(distance.nodes[i].getPosition());
}
distance.line.setPath(coords);
meters = google.maps.geometry.spherical.computeLength(coords);
$("#distance_km").val((meters/1000).toFixed(3));
$("#distance_mi").val((meters/1609.344).toFixed(3));
}
distance.countNodes = function() {
var count = 0;
for (var i = distance.nodes.length - 1; i >= 0; i--) {
if (distance.nodes[i].getMap() == null) {
distance.nodes.splice(i, 1);
}
else {
count++;
}
}
return count;
}
distance.clearNodes = function() {
for(var i = 0; i < distance.nodes.length; i++) {
distance.nodes[i].setMap(null);
}
distance.drawPath();
}