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

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

Jquery Mobile Listview enhancements and customization

    In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.     Let's take a look at a few of them. Some questions are really amazing like " W hen i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview? " Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews  you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.     Another really nice question was " Listview with collapsable listview inside ". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfid...
Post a Comment
Read more

SASS: Syntactically Awesome Stylesheets - An Introduction

    I had some free time today, and decided to explore into SASS, which I had planned on doing for a long time. SASS is really cool and it really is simple styling with a lot of attitude. SASS really makes CSS so much fun. I loved it and am putting up a few posts to talk about the various features of SASS.     SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and much more. The SASS CSS is required to be compiled before it is transformed into standard CSS using a command line tool or a web-framework plugin. Let's not worry about this for now.     SASS CSS can be written using 2 types of syntaxes. The most popularly used syntax is known as "SCSS", rightly named " Sassy CSS" and is a superset of CSS3's syntax. This means that every CSS3 stylesheet is valid SCSS as well. The second syntax is an older one known as the "indented syntax" or just SASS. This syntax is for people who do not love brackets and...
Post a Comment
Read more

Multiple markers...

            It rarely happens that there is just one point of interest or just one location that you would like to mark! Generally there is a bunch of markers that appear on the map! Specifically, you want a list of latitude and longitude pairs representing the points of the markers you'll plot.             To store the list of points, you can combine the power of Javascript's array and object constructs. An array stores a list of numbered entities. To access the elements of the array, you must use their numeric indices. So array[0] will point to the first element in the array while array[n] will point to the nth element in the array.             I will use the following piece of Javascript code to demonstrate how multiple markers can be made to appear on a map using the array structure and the for loop for iteration....
1 comment
Read more

Two maps on the same page - Side-by-side

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...
10 comments
Read more