Drive along - Cool coding

         This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun!

         Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see!

<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" 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">&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"
        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>

         Please execute the above code and please drop in your comments about what you think about it. You can also drop me a mail about your feedbacks about this code or the blog in general!