Skip to main content

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!
Labels:

Comments

  1. OlivierDecember 1, 2010 at 8:20 AM

    Very nice code! Thank you for sharing it =)

    ReplyDelete
  2. Shreerang PatwardhanDecember 1, 2010 at 8:43 AM

    Thanx Olivier...:)

    ReplyDelete
  3. BharathiFebruary 17, 2011 at 12:41 AM

    Shreerang it is really a nice and cool post. Thanks , I am learning a lot from your blog.Keep posting..

    ReplyDelete
  4. Shreerang PatwardhanFebruary 17, 2011 at 8:18 PM

    Thanx Bharathi...:)

    ReplyDelete
  5. AnonymousJune 11, 2011 at 3:17 PM

    what is the format for writing the coordinates in the boxes, as its not working either by dms or dc formats

    ReplyDelete
    Replies
    1. Shreerang PatwardhanOctober 12, 2012 at 3:58 AM

      Co-ordinates should be in degree-decimal format or you can directly enter the addresses also.

      Delete

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

ES6 Rest operator

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...
17 comments
Read more

ES6 101 - Map

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

ES6 101 - Lexical Declarations Let

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more