Google Maps script: Live step by step directions

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 :P) 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&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA&#8221; type=”text/javascript”>
</script>

<script src=”http://econym.org.uk/gmap/epoly.js&#8221; 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”>&nbsp;
</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&#8221;
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 these ads

About Olivier Voyer
Auteur-compositeur-interprète. La tête toujours pleine de musique et d'idées. Comblé par l'amour de Jésus.

2 Responses to Google Maps script: Live step by step directions

  1. Ako Desk says:

    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!

  2. 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..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: