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>
About Olivier Voyer
I like the valuable info you provide in your articles. I?ll bookmark your blog and check once more right here frequently. I am relatively sure I?ll be told many new stuff right here! Best of luck for the following!
advertising and *********** with Adwords. Anyway I?m adding this RSS to my email and can glance out for much extra of your respective interesting content. Ensure that you update this once more very soon..