calculating polyline length

[Kasper]

I am using polylines on a page I'm making, and the amount of polylines [which almost connect] is variable.
But I was wondering how I can get the length of the polylines?

I have tried this, but it doesnt work:

function update() {
	var afstand = google.maps.geometry.computeLength('TilburgUni_TilburgReeshof_path');
	document.getElementById('afstand').value = afstand;
}

it keeps giving me the error: google.maps.geometry.computeLength is not a function
this is the page I'm using it on: http://bit.ly/vY4YFj

Can someone help me on how to use this? I can't find it in the documentation... :S

[MymsMan]

Have you included the Geometry library?

<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=true&region=GB">
    // Google maps API
</script>

[MymsMan]

Yes - you have included the library but you have incuded spherical in the function name
try

var afstand = google.maps.geometry.spherical.computeLength('TilburgUni_TilburgReeshof_path');

[Kasper]

Oh, wow :P Now I dont get the error anymore indeed!
Though I now have this:
document.getElementById("afstand") is null

but there is an input element on my page, with id afstand...:
Afstand: <input type="text" "readonly" id="afstand"> km

Also, can I put multiple paths in that computeLength function?

[MymsMan]

You have quotes around the path name so you are attempting to compute the length of a string literal instead of a path!

[Kasper]

Yeah but when I remove the quotes, I get this error:
TilburgUni_TilburgReeshof_path is not defined

while it IS defined...:

var TilburgUni_TilburgReeshof_path = [
new google.maps.LatLng(51.564666188773856, 5.0525665283203125),
new google.maps.LatLng(51.57341556900758, 4.994373321533203)];
TilburgUni_TilburgReeshof = new google.maps.Polyline({path:TilburgUni_TilburgReeshof_path, strokeColor: "#f47500", strokeOpacity: 1.0, strokeWeight: 2});
TilburgUni_TilburgReeshof.setMap(map);
map.setCenter(new google.maps.LatLng(51.55820977384782, 5.03997802734375), 13);

[xelawho]

you have a couple of problems

- your script is in the head (which is a bad idea anyway) and gets
rendered before the body, so your script runs before the page has a
chance to render your input box, which is why you get "afstand is
undefined" - because it does not exist at the time you are trying to
populate it.

move your script into the body section, with your html elements above
it. that should solve it.

- your polyline is undefined because of a scope issue. try putting the
update() call at the end of your initialize function, instead of
outside of it. and yes, as MymsMan says TilburgUni_TilburgReeshof_path
should not have quotes.

you can compute multiple paths. it would make more sense to me to pass
the name of the path as an argument like

update(TilburgUni_TilburgReeshof_path)
update(TilburgReeshof_GilzeRijen_path)

then

function update(path) {
var afstand = google.maps.geometry.spherical.computeLength(path);

document.getElementById('afstand').value = afstand;

alert(afstand);
}

displaying the results is going to be another issue.

[Kasper]

Ok, thank you so much for that!
Now it works indeed!
What I aim to do with this piece of javascript, is calculate the
length of several polylines, and then put a marker at a certain
distance on the polylines.
However, orignally I meant to put several paths in the computelength
function, but i guess this works aswell. [calling the function several
times and adding up the different lengths]
now I have to make some sort of construction to select which polyline
should be used at what distance, but I guess that is doable... as I've
seen examples with one polyline already, though not with multiple...
what is your advise on this?

Thanks a lot for your help! I really appreciate it!