title: getting the distance and time in google map and direction
body: <p>I'm working on a simple taxi fare calculating program using google map get directions from google map.</p>
  
  <p>So here's the code: </p>
  
  <p>HTML(map.php)</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Demo GPS plugin&lt;/title&gt;
  &lt;style&gt;
      #map {
          width: 500px;
          height: 200px;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=true&amp;amp;key=AIzaSyC7DlktbkGzLS0dvYqRJaGtbXG6mmoGUhA" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gps.jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
  
  $("#map").googleMap().load();
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onunload="GUnload()"&gt;
      &lt;div id="directions"&gt;&lt;/div&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  
      &lt;form action="directions.php" method="post"&gt;
          &lt;p&gt;&lt;b&gt;From: &lt;/b&gt;&lt;input id="start" type="text"/&gt;
          &lt;b&gt;To: &lt;/b&gt;&lt;input id="end" type="text" /&gt;&lt;/p&gt;
          &lt;input name="submit" id="getdirections" type="submit" value="Get Directions" /&gt;
      &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JQUERY code:</p>
  
  <pre><code>(function($) {
  
      $.GoogleMapObjectDefaults = {        
          zoomLevel: 14,
      imagewidth: 50,
      imageheight: 50,
      start: '#start',
          end: '#end',
      directions: 'directions',
          submit: '#getdirections',
      tooltip: 'false',
      image: 'false'
      };
  
      function GoogleMapObject(elementId, options) {
          /* private variables */
          this._inited = false;
          this._map = null;
          this._geocoder = null;
  
          /* Public properties */
          this.ElementId = elementId;
          this.Settings = $.extend({}, $.GoogleMapObjectDefaults, options || '');
      }
  
      $.extend(GoogleMapObject.prototype, {
          init: function() {
              if (!this._inited) {
                  if (GBrowserIsCompatible()) {
                      this._map = new GMap2(document.getElementById(this.ElementId));
                      this._map.addControl(new GSmallMapControl());
                      this._geocoder = new GClientGeocoder();
                  }
  
                  this._inited = true;
              }
          },
          load: function() {
              //ensure existence
              this.init();
  
              if (this._geocoder) {
                  //"this" will be in the wrong context for the callback
                  var zoom = this.Settings.zoomLevel;
                  var center = this.Settings.center;
          var width = this.Settings.imagewidth;
          var height = this.Settings.imageheight;
                  var map = this._map;
  
          if (this.Settings.tooltip != 'false') {
              var customtooltip = true;
              var tooltipinfo = this.Settings.tooltip;
          }
  
          if (this.Settings.image != 'false') {
              var customimage = true;
              var imageurl = this.Settings.image;
          }
  
                  this._geocoder.getLatLng(center, function(point) {
                      if (!point) { alert(center + " not found"); }
                      else {
                          //set center on the map
                          map.setCenter(point, zoom);
  
              if (customimage == true) {
                  //add the marker
                  var customiconsize = new GSize(width, height);
                  var customicon = new GIcon(G_DEFAULT_ICON, imageurl);
                  customicon.iconSize = customiconsize;
                  var marker = new GMarker(point, { icon: customicon });
                  map.addOverlay(marker);
              } else {
                  var marker = new GMarker(point);
                  map.addOverlay(marker);
              }
  
              if(customtooltip == true) {
                  marker.openInfoWindowHtml(tooltipinfo);
              }
                      }
                  });
              }
  
  
              //make this available to the click element
              $.data($(this.Settings.submit)[0], 'inst', this);
  
              $(this.Settings.submit).click(function(e) {
                  e.preventDefault();
                  var obj = $.data(this, 'inst');
          var outputto = obj.Settings.directions;
                  var from = $(obj.Settings.start).val();
                  var to = $(obj.Settings.end).val();
          map.clearOverlays();
          var gdir = new GDirections(map, document.getElementById(outputto));
          gdir.load("from: " + from + " to: " + to);
  
                  //open the google window
                  //window.open("http://maps.google.com/maps?saddr=" + from + "&amp;daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
              });
  
              return this;
          }
      });
  
      $.extend($.fn, {
          googleMap: function(options) {
              // check if a map was already created
              var mapInst = $.data(this[0], 'googleMap');
              if (mapInst) {
                  return mapInst;
  
              }
  
  
              //create a new map instance
              mapInst = new GoogleMapObject($(this).attr('id'), options);
              $.data(this[0], 'googleMap', mapInst);
  
              return mapInst;
  
          }
      });
  })(jQuery);
  </code></pre>
  
  <p>The user will input two different locations(from and to) then it will calculate distance and time.. Now, how can i get the values of distance and time so I can use it to calculate the fare?.</p>
  
  <p>Thanks for the help.</p>