Hi there, anyone could help me?
I have a google map api with an animated car, i needed to get my whole animation time to a variable before it happens, so i could use that variable to control a sliding time in visual basic.
My code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Farm�cias de Servi�o</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw&hl=pt-PT" type="text/javascript"></script>
<script src="epoly.js" type="text/javascript"></script>
<script src="lcompass.js" type="text/javascript"></script>
<style>
body {background-color:black;color:green;font-family:"Times New Roman", Times, serif;font-size:30px;}
</style>
</head>
<body onunload="GUnload()">
<div id="controls">
<form onsubmit="start();return false" action="#">
Introduzir coordenadas e submeter<br />
<input type="text" size="80" maxlength="200" id="startpoint" value="40.982255, -8.535128" /><br />
<input type="text" size="80" maxlength="200" id="endpoint" value="40.925483, -8.547729" /><br />
<input type="submit" value="Start" />
</form>
</div>
<div id="map" style="width: 100%; height: 550px"></div>
<div id="step"> </div>
<div id="distance">Quil�metros: 0.00</div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),2);
map.addControl(new LCompassControl());
var dirn = new GDirections();
var step = 5; // metres
var tick = 100; // milliseconds
var poly;
var poly2;
var lastVertex = 0;
var eol;
var directionsDisplay;
var car = new GIcon();
car.image="caricon.png";
//DEFAULTS:
car.iconSize=new GSize(32,18);
car.iconAnchor=new GPoint(16,9);
//car.iconSize=new GSize(38,38);
//car.iconAnchor=new GPoint(20,14);
var compassimage=new GIcon();
compassimage="compass.png";
compassimage.iconSize=new GSize(50,50);
compassimage.iconAnchor=new GPoint(2,2);
var marker;
var k=0;
var stepnum=0;
var speed = "";
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getVertexCount() > 20) {
poly2=new GPolyline([poly.getVertex(lastVertex-1)]);
map.addOverlay(poly2)
}
if (poly.GetIndexAtDistance(d) < lastVertex+2) {
if (poly2.getVertexCount()>1) {
poly2.deleteVertex(poly2.getVertexCount()-1)
}
poly2.insertVertex(poly2.getVertexCount(),poly.GetPointAtDistance(d));
} else {
poly2.insertVertex(poly2.getVertexCount(),poly.getVertex(lastVertex++));
}
}
function animate(d) {
if (d>eol) {
document.getElementById("step").innerHTML = "<b>Chegou ao destino!<\/b>";
document.getElementById("distance").innerHTML = "Quil�metros: "+(d/1000).toFixed(2);
return;
}
var p = poly.GetPointAtDistance(d);
if (k++>=180/step) {
map.panTo(p);
k=0;
}
marker.setPoint(p);
document.getElementById("distance").innerHTML = "Quil�metros: "+(d/1000).toFixed(2)+speed;
if (stepnum+1 < dirn.getRoute(0).getNumSteps()) {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
stepnum++;
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = "<b>Pr�ximo:<\/b> "+steptext;
var stepdist = dirn.getRoute(0).getStep(stepnum-1).getDistance().meters;
var steptime = dirn.getRoute(0).getStep(stepnum-1).getDuration().seconds;
var stepspeed = ((stepdist/steptime) * 3.6).toFixed(0);
step = stepspeed/3.6;
speed = "<br>Velocidade: " + stepspeed +" KMH";
}
} else {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
document.getElementById("step").innerHTML = "<b>Pr�ximo: Siga em frente.<\/b>";
}
}
updatePoly(d);
setTimeout("animate("+(d+step)+")", tick);
}
GEvent.addListener(dirn,"load", function() {
document.getElementById("controls").style.display="none";
poly=dirn.getPolyline();
eol=poly.Distance();
map.setCenter(poly.getVertex(0),17);
var starticon = new GIcon(G_DEFAULT_ICON);
starticon.image="fsmap.p.png";
var finishicon = new GIcon(G_DEFAULT_ICON);
finishicon.image="fsmap.c.png";
map.addOverlay(new GMarker(poly.getVertex(0),starticon));
map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),finishicon));
marker = new GMarker(poly.getVertex(0),{icon:car});
map.addOverlay(marker);
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = steptext;
poly2 = new GPolyline([poly.getVertex(0)]);
map.addOverlay(poly2);
setTimeout("animate(0)",2000); // Allow time for the initial map display
});
GEvent.addListener(dirn,"error", function() {
alert("Location(s) not recognised. Code: "+dirn.getStatus().code);
});
function start() {
var startpoint = document.getElementById("startpoint").value;
var endpoint = document.getElementById("endpoint").value;
dirn.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
}
}
//]]>
</script>
</body>
</html>
THANKS IN ADVANCE!!!
