Google Maps script: Live step by step directions
1 December 2010 2 Comments
I’v just seen a very cool application of Google Maps integrated with Javascript in an HTML page. The code has been developed by a guy named Shreerang Patwardhan (don’t ask me to pronounce 
) and can be found on this blog: http://shreerangpatwardhan.blogspot.com/2010/11/drive-along-cool-coding.html
I’m copying the code here, in case the blog in no longer accessible. Just copy the following code in an HTML file.
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<title>
Drive Along
</title><script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA” type=”text/javascript”>
</script><script src=”http://econym.org.uk/gmap/epoly.js” type=”text/javascript”>
</script></head>
<body onunload=”GUnload()”>
<div id=”controls”>
<form onsubmit=”start();return false” action=”#”>
Enter start and end addresses.<br />
<input type=”text” size=”80″ maxlength=”200″ id=”startpoint” value=” ” />
<br />
<input type=”text” size=”80″ maxlength=”200″ id=”endpoint” value=” ” />
<br />
<input type=”submit” value=”Start” />
</form>
</div><div id=”map” style=”width: 700px; height: 500px”>
</div>
<div id=”step”>
</div>
<div id=”distance”>Miles: 0.00
</div><script type=”text/javascript”>
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),2);
var dirn = new GDirections();
var step = 5; // metres
var tick = 100; // milliseconds
var poly;
var eol;
var car = new GIcon();
car.image=”http://www.freeiconsweb.com/Freeicons/Car_icon/Dodge%20Viper%20SRT-10.png”
car.iconSize=new GSize(28,28);
car.iconAnchor=new GPoint(16,9);
var marker;
var k=0;
var stepnum=0;
var speed = “”;function animate(d)
{
if (d>eol)
{
document.getElementById(“step”).innerHTML = “<b>Trip completed<\/b>”;
document.getElementById(“distance”).innerHTML = “Miles: “+(d/1609.344).toFixed(2);
return;
}
var p = poly.GetPointAtDistance(d);
if (k++>=180/step)
{
map.panTo(p);
k=0;
}
marker.setPoint(p);
document.getElementById(“distance”).innerHTML = “Miles: “+(d/1609.344).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>Next:<\/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) * 2.24).toFixed(0);
step = stepspeed/2.5;
speed = “<br>Current speed: ” + stepspeed +” mph”;
}
}
else
{
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d))
{
document.getElementById(“step”).innerHTML = “<b>Next: Arrive at your destination<\/b>”;
}
}
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);
map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
marker = new GMarker(poly.getVertex(0),{icon:car});
map.addOverlay(marker);
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById(“step”).innerHTML = steptext;
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>
